[JavaScript知识库]el-form 嵌套 el-table 增删改查 并进行验证

<template>
<el-form
      :model="addJsonForm"
      :inline="true"
      label-width="108px"
      :rules="addJsonForm.addJsonRules"
    >
      <el-table
        :data="addJsonForm.tableData"
        border
      >
     <!-- 这里用做增删改查 -->
      <el-table-column
          align="center"
          fixed="left"
          header-align="center"
          label="操作"
          width="160"
        >
          <template #default="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="createdBtnActive(scope.row, scope.$index)"
            ></el-button>
          </template>
       <el-table-column
          align="center"
          header-align="center"
          label="小蝈蝈帅不帅"
          type="text"
          width="240"
        >
          <template slot-scope="scope">
          <!-- true直接渲染数据，false需要表单支持 -->
            <span v-if="scope.row.statusBtn == true">{{
              scope.row.handsome
            }}</span>
            <el-form-item
              v-else
              :prop="'tableData.' + scope.$index + '.handsome'"
              :rules="addJsonForm.addJsonRules.handsome"
            >
	              <el-radio-group v-model="scope.row.handsome">
				      <el-radio :label="他很帅">他很帅</el-radio>
				      <el-radio :label="他非常帅">他非常帅</el-radio>
				      <el-radio :label="他帅">他帅</el-radio>
				      <el-radio :label="他非常非常帅">他非常非常帅</el-radio>
			     </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
</el-form>
</template>
<script>
export default {
  data() {
    const handsome = (rule, value, callback) => {
      //这里可以当做普通的表单验证来写，value为当前操作的input框
      // this.countNum()为自己封装的一个函数，作用为查找数组中包含的某个元素的个数
      if (
        this.countNum(
          this.addJsonForm.tableData.map((item) => item.handsome),
          value
        ) >= 2
      ) {
        callback(new Error("选择不能重复"));
      }
      callback();
    };
    return {
      addJsonForm: {
        tableData: [], //列表数据源
        tablefrom: {
          handsome: "他非常非常帅",
          statusBtn: false,
        },
        addJsonRules: {
          handsome: [
            { required: true, message: "请选择", trigger: "chage" },
            { validator: handsome, trigger: "chage" },
          ],
        },
      },
    };
  },
  methods: {
    createdBtnActive(row, index) {
      console.log(row, index);
      //部分代码
      this.addJsonForm.tableData.splice(index + 1, 0, {
        handsome: "他非常非常帅",
        statusBtn: false,
      });
    },

    // //获取数据
    getTableList() {
      this.addJsonForm.tableData = [];
      queryTemplateFields().then((res) => {
        //如果有数据遍历这个数组，并在每一个对象中增加一个statusBtn字段，用来判断为后端传入数据，直接渲染即可
        if (res.data.length != 0) {
          for (let item of res.data) {
            item["statusBtn"] = true;
          }
          this.addJsonForm.tableData = res.data;
        } else {
          //如果没有数据push一条默认数据
          this.addJsonForm.tableData.push({
            handsome: "他非常非常帅",
            statusBtn: false,
          });
        }
      });
    },
  },
};
</script>