element-ui 解决table里包含表单验证(加了表单校验导致表格当前被校验单元格无法对其样式处理)

先看效果图

上代码html

<el-form :model="tableForm" ref="tableForm" :rules="rules" size="small">
      <el-table :data="tableForm.tableData" border :loading="loading">
   		<el-table-column label="类型" prop="fileType">
          <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.fileType'"
                :rules="rules.fileType"
              >
                <el-select v-model="scope.row.fileType" placeholder="请选择">
                  <el-option label="文件类" value="文件类"></el-option>
                  <el-option label="文本输入类" value="文本输入类"></el-option>
                </el-select>
              </el-form-item>
          </template>
        </el-table-column>
      </el-table>
   </el-form>

data() {
    return {
      tableForm: {
        //附属条件表格
        tableData: []
      },
      rules: {
        fileType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ]
      },
    }
  },
  methods: {
    validateKey(rule, value, callback) {
      if (value === '') {
        callback(new Error('请选择类型'))
      } else {
        callback()
      }
    },
     // 保存按钮
    submit(tableData) {
      // console.log(tableData)
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
		// 业务逻辑操作代码...
        }
      })
    },

加了表单校验导致表格当前被校验单元格无法对其样式处理方式

  ::v-deep  .el-form-item {
    margin-bottom: 0px !important;
  }
  ::v-deep .el-form-item.is-error {
    margin-bottom: 15px !important;
  }