elementui - table中下拉进行验证

<template>
  <!-- 巡查计划 - 新增巡查点位 -->
  <el-dialog :visible.sync="dialogShow1" title="新增巡查点位" width="800" top="15vh" @close='handleCancle'>
    <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
      <el-table :data="ruleForm.tableData" border style="width: 100%;">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="objType" label="巡查对象类型" align="center">
          <template v-slot="scope">
            <el-form-item :prop="'tableData.'+scope.$index+'.objType'" :rules="rules.objType" :style="{marginBottom:marginBottomNum}">
              <el-select clearable v-model="scope.row.objType" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="objName" label="巡查对象/点位名称" align="center">
          <template v-slot="scope">
            <el-form-item :prop="'tableData.'+scope.$index+'.objName'" :rules="rules.objName" :style="{marginBottom:marginBottomNum}">
              <el-select clearable v-model="scope.row.objName" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="lat" label="点位经纬度" align="center">
          <template v-slot="scope">
            <el-form-item :style="{marginBottom:marginBottomNum}">
              <el-input disabled v-model="scope.row.lat"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color: red;" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('ruleForm')">取消</el-button>
      <el-button type="primary" @click="getSave('ruleForm')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    // 弹窗是否显示
    dialogShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    var objType = (rule, value, callback) => {
      console.log("sdfsdfs:", value);
      if (!value) {
        callback(new Error("请选择巡查对象类型"));
      } else {
        this.marginBottomNum = "0px";
        callback();
      }
    };
    var objName = (rule, value, callback) => {
      console.log("sdfsdfs:", value);
      if (!value) {
        this.marginBottomNum = "20px";
        callback(new Error("请选择巡查对象/点位名称"));
      } else {
        callback();
      }
    };
    return {
      dialogShow1: this.dialogShow,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      ruleForm: {
        tableData: [{ objType: "", objName: "" }],
      },
      rules: {
        objType: [{ require: true, validator: objType, trigger: "change" }],
        objName: [{ validator: objName, trigger: "change" }],
      },
      marginBottomNum: "0px",
    };
  },
  created() {},
  methods: {
    // 保存
    getSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("验证通过");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    handleDelete() {},
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 右上角叉号
    handleCancle() {
      this.$emit("close", this.dialogShow1);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>