element-ui 编辑表格带表单验证

vue2 + element-ui 编辑表格 动态新增行 点击保存 表格中每一个可编辑项独立表单验证

直接上代码

<template>
  <div class="attribute">
    <div class="table_top_btn">
      <el-button
        size="small"
        type="primary"
        :loading="saveStatus"
        @click="saveClick"
        >保存</el-button
      >
      <div>
        <span>一级标签</span>
        <span>
          <el-button
            @click="addLevelOne"
            style="margin-left: 15px"
            size="small"
            type="primary"
          >
            添加一级标签
          </el-button>
        </span>
      </div>
    </div>
    <div>
      <el-form ref="tableDataFrom" :model="tableDataFrom" :rules="tableRules">
        <el-table
          :data="tableDataFrom.tableData"
          style="width: 100%"
          border
          row-key="id"
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          :tree-props="{ children: 'childs' }"
        >
          <el-table-column
            align="center"
            prop="name"
            label="一级标签"
            width="250px"
          >
            <template slot-scope="scope">
              <el-form-item
                v-if="scope.row"
                :prop="'tableData.' + scope.$index + '.name'"
                :rules="tableRules.name"
              >
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入新标签名称"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="二级标签" prop="value">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.value'"
                :rules="tableRules.value"
              >
                <el-input
                  v-model="scope.row.value"
                  class="tag_input item_div"
                  size="small"
                  placeholder="请输入新标签名称"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120px">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="deleteLeve(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saveStatus: false, // 保存按钮的状态
      // 表单
      tableDataFrom: {
        tableData: [],
      },
      tableData: [],
      // 校验规则
      tableRules: {
        name: [
          { required: true, message: "请输入新标签名称", trigger: "blur" },
        ],
        value: [
          { required: true, message: "请输入新标签名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    // 获取列表
    getCategoryList() {
      var strlist = [
        {
          name: "我是第一个一级标签",
          value: "我是第二个二级标签",
        },
        {
          name: "我是第一个一级标签",
          value: "我是第二个二级标签",
        },
      ];
      this.tableData = strlist;
      this.tableDataFrom.tableData = strlist;
    },
    // 添加一级一栏
    addLevelOne() {
      var str = {
        name: "",
        value: "",
      };
      this.tableDataFrom.tableData.push(str);
    },
    // 删除整行的标签
    deleteLeve(index, data) {
      var name = data.name ? data.name : "空";
      var h = this.$createElement;
      var msg = h("p", null, [
        h("span", null, "请确定是否删除一级标签为"),
        h("span", { style: "color:#f56c6c" }, name),
        h("span", null, ",并包含其二级标签"),
      ]);
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(index, 1);
          if (this.tableData.length === 0) {
            var str = {
              name: "",
              value: "",
            };
            this.tableData.push(str);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 保存
    saveClick() {
      this.$refs["tableDataFrom"].validate((valid) => {
        if (!valid) return false;
        this.saveStatus = true;
        console.log("保存成功");
        this.saveStatus = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.attribute {
  padding: 20px;
}
.tag_box {
  text-align: left;
  .tag_box_button {
    display: inline-block;
    margin: 10px 15px;
    position: relative;
  }
  .item_div {
    position: relative;
  }
  .el-icon-error {
    position: absolute;
    color: #f56c6c;
    top: -5px;
    right: -5px;
    cursor: pointer;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 2px 5px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.table_top_btn {
  margin-bottom: 15px;
}
</style>