el-table表格内部实现可编辑操作，并添加校验

业务需求：项目需要设置一个打卡管理，配置打卡时间（可能是多个，不确定，因此不打算直接用form-item，直接使用table，设置一个模板后，根据需求进行添加或删除）。




如上图，开启打卡后，需要对前面几项进行填写，关闭则禁用，提交后，需要对开启打卡的数据进行校验。 代码如下：

<el-form :model="form" ref="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option
                v-for="item in sexList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生日期" prop="birthdate">
            <el-date-picker
              v-model="form.birthdate"
              type="date"
              placeholder="选择出生日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否开启打卡">
            <el-switch v-model="form.isOpen"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="form.template" style="width: 100%" v-if="form.isOpen">
        <el-table-column
          prop="title"
          align="center"
          width="80px"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="打卡时间"
          prop="time"
          align="center"
          width="400px"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="
                !scope.row.isUse ? '' : 'template.' + scope.$index + '.time'
              "
              label-width="0"
              :rules="!scope.row.isUse ? {} : rules.time"
            >
              <el-time-picker
                is-range
                v-model="scope.row.time"
                :disabled="!scope.row.isUse"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="最早打卡时间"
          prop="start"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
          	<!-- 通过当前的scope.row.isUse（开关）控制校验的规则和校验的字段 -->
            <el-form-item
              :prop="
                !scope.row.isUse ? '' : 'template.' + scope.$index + '.start'
              "
              label-width="0"
              :rules="!scope.row.isUse ? {} : rules.start"
            >
              <el-time-picker
                v-model="scope.row.start"
                :disabled="!scope.row.isUse"
                placeholder="选择时间范围"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="最晚打卡时间"
          prop="last"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="
                !scope.row.isUse ? '' : 'template.' + scope.$index + '.last'
              "
              label-width="0"
              :rules="!scope.row.isUse ? {} : rules.last"
            >
              <el-time-picker
                v-model="scope.row.last"
                :disabled="!scope.row.isUse"
                placeholder="选择时间范围"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="是否开启打卡"
          prop="isUse"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-form-item prop="isUse" label-width="0">
              <el-switch v-model="scope.row.isUse"> </el-switch>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="display:flex;justify-content:center;margin-top:20px;">
      <el-button @click="submitForm('form')">提交</el-button>
    </div>

JS代码：

<script>
export default {
  data() {
    return {
      form: {
        name: "123",
        sex: "1",
        birthdate: "1",
        isOpen: false,
        template: [],
      },
      sexList: [
        { name: "男", value: "1" },
        { name: "女", value: "2" },
        { name: "未知", value: "-1" },
      ],
      // 模板数据
      defaultTable: [
        { title: "开始时间", time: "", start: "", last: "", isUse: true },
        { title: "截止时间", time: "", start: "", last: "", isUse: true },
      ],
      // 表格数据的校验
      rules: {
        name: {
          required: true,
          message: "请输入名字",
          tirgger: ["blur", "change"],
        },
        sex: {
          required: true,
          message: "请选择性别",
          tirgger: ["blur", "change"],
        },
        birthdate: {
          required: true,
          message: "请选择出生日期",
          tirgger: ["blur", "change"],
        },
        time: {
          required: true,
          type: "array",
          message: "打卡时间不能为空",
          tirgger: ["blur", "change"],
        },
        start: {
          required: true,
          type: "string",
          message: "最早打卡时间不能为空",
          tirgger: ["blur", "change"],
        },
        last: {
          required: true,
          message: "最晚打卡时间不能为空",
          tirgger: ["blur", "change"],
        },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
  	// 初始化后，把默认模板添加的form的template中  如果需要配置多个，可以在添加个增加或减少事件，对form的template 进行push和splice事件
    init() {
      this.form.template.push(...this.defaultTable);
    },
    submitForm(form) {
      console.log(this.form);
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log("校验通过");
        } else {
          console.log("校验失败");
        }
      });
    },
  },
};
</script>

当然，以上只是一种写法，还有一种是给每项新增一个判断，默认是span之类的不可修改标签，点击之后，切换成input或者其他可修改的标签，进行操作。当点击其他位置后，恢复成span之类的不可修改标签。

个人记录。