vue element 可编辑表格行内验证

<template>
    <div class="page-layout rataMdel">
      <el-button type="primary" @click="addItem">+添加一行</el-button>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-table :data="ruleForm.tableList" style="width: 100%">
          <el-table-column prop="name">
            <!-- 变量rules -->
            <template slot-scope="scope">
              <el-form-item
                label="活动名称"
                :prop="'tableList.' + scope.$index + '.name'"
                :rules="rules.name"
              >
                <el-input v-model="scope.row.name"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="region">
            <!-- 行内rules -->
            <template slot-scope="scope">
              <el-form-item
                label="活动区域"
                :prop="'tableList.' + scope.$index + '.region'"
                :rules="[{ required: true }]"
              >
                <el-select v-model="scope.row.region" placeholder="活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        ruleForm: {
          tableList: []
        },
        rules: {
          name: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      addItem() {
        this.ruleForm.tableList.push({
          name: "",
          region: ""
        });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert("submit!");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    }
  };
  </script>

  <!-- <style lang='scss' scoped>
  .rataMdel {
    .el-table td {
      padding: 6px 0;
    }
    .el-form-item__error {
      display: none;
    }
    .header-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tableTitle {
      font-size: 20px;
      margin-bottom: 30px;
    }
    .charts-box {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .tableText {
      padding: 15px;
      font-size: 15px;
      color: #333333;
    }
    .small-num {
      display: inline-block;
      width: 70px;
    }
    .small-string {
      display: inline-block;
      width: 130px;
    }
    p {
      margin: 0;
      padding: 0;
    }
    .el-form-item {
      display: inline-block;
      margin-bottom: 0px;
    }
  }
  </style> -->