VUE el-table中 rules校验的message不显示

Question

el-form使用了el-table，但设置表单校验时发现校验规则生效，但提示无法显示，提示内容在浏览器里已经渲染。
HTML结构

<template>
  <div class="demo">
    <!-- 表单必须嵌套在表格外面，表单必须绑定 rules 、ref属性 -->
    <el-form :model="ruleForm" :rules="rules" ref="stuff_kpi_table">
      <el-form-item>
        <el-row>
          <el-col :span="4" class="headertitle">
            <p class="tableheader">员工姓名:</p>
            <div v-if="this.auth == 1">
              <el-select
                v-model="value"
                filterable
                placeholder="请选择"
                class="select"
                @change="changeValue"
              >
                <el-option
                  v-for="item in ruleForm.deptStuff"
                  :key="item.userid"
                  :label="item.name"
                  :value="item.userid"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    {{ item.department }}
                  </span>
                </el-option>
              </el-select>
            </div>
            <div v-else>
              {{ ruleForm.tableHeaderinfo.name }}
            </div>
          </el-col>
          <el-col :span="3" class="headertitle">
            <p class="tableheader">员工号:</p>
            <span>{{ ruleForm.tableHeaderinfo.userid }}</span>
          </el-col>
          <el-col :span="3" class="headertitle">
            <p class="tableheader">所在科室:</p>
            <span>{{ ruleForm.tableHeaderinfo.department }}</span>
          </el-col>
          <el-col :span="3" class="headertitle">
            <p class="tableheader">岗位名称:</p>
            <span>{{ ruleForm.tableHeaderinfo.position }}</span>
          </el-col>
          <el-col :span="4" class="headertitle">
            <p class="tableheader">直接上级:</p>
            <div v-if="this.auth == 1">
              <el-select
                v-model="value"
                filterable
                placeholder="请选择"
                class="select"
                @change="changeValue"
              >
                <el-option
                  v-for="item in ruleForm.deptStuff"
                  :key="item.userid"
                  :label="item.name"
                  :value="item.userid"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    {{ item.department }}
                  </span>
                </el-option>
              </el-select>
            </div>
            <div v-else>
              {{ ruleForm.tableHeaderinfo.name }}
            </div>
          </el-col>
          <el-col :span="5" class="headertitle">
            <p class="tableheader">分管部门领导:</p>
            <div v-if="this.auth == 1">
              <el-select
                v-model="value"
                filterable
                placeholder="请选择"
                class="select"
                @change="changeValue"
              >
                <el-option
                  v-for="item in ruleForm.deptStuff"
                  :key="item.userid"
                  :label="item.name"
                  :value="item.userid"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    {{ item.department }}
                  </span>
                </el-option>
              </el-select>
            </div>
            <div v-else>
              {{ ruleForm.tableHeaderinfo.name }}
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="stuff_kpi_table">KPI指标</div>
      <el-divider></el-divider>
      <el-table
        :data="ruleForm.stuff_kpi_table"
        style="width: 100%"
        ref="stuff_kpi_table"
      >
        <el-table-column
          prop="id"
          label="序号"
          width="50"
          height="100"
          type="index"
          align="center"
          :index="(index) => index + 1"
        />
        <el-table-column prop="name" label="指标名称" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{ kpitable.row.name }}</span>
            <!-- 每个字段必须要动态的绑定表单的 prop、rules属性 -->
            <el-form-item
              :prop="`stuff_kpi_table.${kpitable.$index}.name`"
              :rules="rules['name']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.name"
                placeholder="请输入指标名称"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">
              {{ kpitable.row.unit }}
            </span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.unit'"
              :rules="rules['unit']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.unit"
                placeholder="请输入单位"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="权重" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{
              kpitable.row.weight
            }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.weight'"
              :rules="rules['weight']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.weight"
                placeholder="请输入权重"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="period" label="考核周期" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{
              kpitable.row.period
            }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.period'"
              :rules="rules['period']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.period"
                placeholder="请输入请输入考核周期"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="definition" label="指标定义" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{
              kpitable.row.definition
            }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.definition'"
              :rules="rules['definition']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.definition"
                placeholder="请输入请输入指标定义"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="standard" label="打分标准" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{
              kpitable.row.standard
            }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.standard'"
              :rules="rules['standard']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.standard"
                placeholder="请输入请输入考核周期"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="t1" label="T1" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{ kpitable.row.t1 }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.t1'"
              :rules="rules['t1']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.t1"
                placeholder="请输入请输入T1值"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="t2 " label="T2" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{ kpitable.row.t2 }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.t2 '"
              :rules="rules['t2 ']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.t2"
                placeholder="请输入请输入T2值"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="t3" label="T3" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{ kpitable.row.t3 }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.t3'"
              :rules="rules['t3']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.t3"
                placeholder=""
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="指标得分" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{
              kpitable.row.score
            }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.score'"
              :rules="rules['score']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.score"
                placeholder="请输入请输入考核周期"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
          <template #default="kpitable">
            <span v-show="!kpitable.row.editFlag">{{
              kpitable.row.remark
            }}</span>
            <el-form-item
              :prop="'stuff_kpi_table.' + kpitable.$index + '.remark'"
              :rules="rules['remark']"
            >
              <el-input
                v-show="kpitable.row.editFlag"
                v-model="kpitable.row.remark"
                placeholder=""
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="kpitable">
            <div style="display: flex">
              <el-button
                size="small"
                type="primary"
                icon="CircleCheck"
                style="width: 90px"
                v-show="kpitable.row.editFlag"
                @click="submit(kpitable.row)"
                >保存
              </el-button>
              <el-button
                size="small"
                icon="Edit"
                type="text"
                v-show="!kpitable.row.editFlag"
                @click="edit(kpitable.row)"
              >
                修改
              </el-button>
              <el-button
                size="small"
                icon="Delete"
                type="text"
                v-show="!kpitable.row.editFlag"
                @click="del(kpitable.row.$index)"
                >删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="width: 100%">
      <el-button
        @click="add"
        size="small"
        style="width: 100px; margin-top: 20px; background-color: #fff"
        >添加
      </el-button>
    </div>
  </div>
</template>

JS结构

export default {
  name: "Chart",
  data() {
    return {
      ruleForm: {
        stuff_kpi_table: [],
        tableHeaderinfo: {
          userid: null,
          department: null,
          name: null,
          position: null,
        },
        deptStuff: [
          {
            userid: "0000123456",
            department: "xxxx",
            name: "xxx",
            position: "xxxx",
          },
          {
            userid: "0000345621",
            department: "办公室",
            name: "xxxx",
            position: "xxxxx",
          },
          {
            userid: "00054892",
            department: "xxxx",
            name: "x'x",
            position: "xxx",
          },
        ],
      },
      // 判断表单状态阶段，控制表单中一些项显示与否
      status: 1,
      // 判断人员权限，控制表单中一些项显示与否
      auth: 1,
      value: null,
      rules: {
        name: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          { max: 30, message: "最多输入30个字符", trigger: "change" },
          // {
          //   validator: (rule, value, callback) => {
          //     if (!value) {
          //       return callback();
          //     }
          //     var re = /^1[3-9]\d{9}$/;
          //     if (re.test(value)) {
          //       callback();
          //     } else {
          //       callback(new Error("请输入正确的手机号!"));
          //     }
          //   },
          //   trigger: "blur",
          // },
        ],
        unit:[
          {required: true, message: "请输入单位", trigger: "blur"}
        ],
        contactEmail: [
          { max: 60, message: "最多输入60个字符", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback();
              }
              var re = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
              if (re.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的邮箱!"));
              }
            },
            trigger: "blur",
          },
        ],
        position: [{ max: 30, message: "最多输入30个字符", trigger: "change" }],
      },
    };
  },
  methods: {
    // 选择员工姓名事件
    changeValue(value) {
      console.log(value);
      var obj = this.ruleForm.deptStuff.find(function (item) {
        return item.userid === value;
      });
      console.log(obj);
      this.ruleForm.tableHeaderinfo.userid = String(obj.userid);
      this.ruleForm.tableHeaderinfo.department = String(obj.department);
      console.log(String(obj.department));
      this.ruleForm.tableHeaderinfo.name = String(obj.name);
      this.ruleForm.tableHeaderinfo.position = String(obj.position);
    },
    //点击添加联系人
    add() {
      this.ruleForm.stuff_kpi_table.push({
        name: "",
        unit: "",
        weight: null,
        period: "",
        definition: "",
        standard: "",
        t1: null,
        t2: null,
        t3: null,
        score: null,
        remark: null,
        editFlag: true, // 可编辑标识
        isSubmit: false, // 是否点击确定标识
      });
    },
    // 保存新增的联系人
    submit(row) {
      this.$refs["stuff_kpi_table"].validate((v) => {
        if (v) {
          console.log(!row.name);
          console.log(!row.unit);
          if (!row.name && !row.unit && !row.weight && !row.standard) {
            console.log("balbalmiya");
            return this.$message({
              message: "请输入内容",
              type: "error",
            });
          }
          row.editFlag = false;
          row.isSubmit = true;
        }
      });
    },
    // 编辑联系人
    edit(row) {
      row.editFlag = true;
    },
    // 删除联系人
    del(index) {
      this.ruleForm.stuff_kpi_table.splice(index, 1);
    },
  },
};

css

.el-form-item {
  margin-bottom: 0;
}
.headertitle {
  display: flex;
  justify-items: flex-start;
}
.stuff_kpi_table {
  display: flex;
  justify-content: center;
  font-size: 1.5em;
  background-color: rgb(187, 183, 183);
}

在网上搜到和我类似的bug但采用他的方法后仍未解决，参考https://segmentfault.com/q/1010000022609881?bd_source_light=4746641

Answer 1

高度调整一下就好了只是被挡住了