vue2的element的table组件使用form校验

1.需求描述

vue2有时候做自增表格el-table，希望能够带一些校验，但又不想手搓校验逻辑，可以借用el-form的校验逻辑。

2.代码处理

1. html

<template>
    <div class="sad-cont">
      <el-form ref="form" :model="form">
        <el-table :data="form.tableData" border size="mini">
          <el-table-column align="center" prop="other" label="名称" width="230">
            <template slot-scope="scope">
              {{ scope.row.min }} ~ {{ scope.row.max }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="min" label="最小值" width="230">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.min'" :rules="ruleForm.min">

                <el-input-number v-model="scope.row.min" placeholder="请输入最小值" controls-position="right" />
                <template slot="error" slot-scope="itemScope">
                  <!-- 自定义错误信息 -->
                  <div v-if="itemScope.error">
                    <el-tooltip :content="itemScope.error" placement="top">
                      <i class="el-icon-warning-outline sad-item-error" />
                    </el-tooltip>
                  </div>
                </template>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="max" label="最大值" width="230">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.max'" :rules="ruleForm.max">
                <el-input-number v-model="scope.row.max" placeholder="请输入最大值" controls-position="right" />
                <template slot="error" slot-scope="itemScope">
                  <!-- 自定义错误信息 -->
                  <div v-if="itemScope.error">
                    <el-tooltip :content="itemScope.error" placement="top">
                      <i class="el-icon-warning-outline sad-item-error" />
                    </el-tooltip>
                  </div>
                </template>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column fixed="right">
            <template slot="header">
              <div>
                <span>操作</span>
                <el-tooltip content="添加数据" placement="top">
                  <el-button
                    size="mini"
                    icon="el-icon-plus"
                    class="table-icon-style sad-btn2"
                    @click="addRow()"
                  />
                </el-tooltip>

              </div>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                class="table-icon-style"
                @click="deleteRow(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    

    <div>
      <el-button type="primary" @click="submitData">确 定</el-button>
    </div>
  </div>
</template>

2. js

import { notEmpty, isEmpty } from '@/utils/validate';

export default {
  components: {
  },
  props: {
    //  默认数据
    defaultData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      form: {
        tableData: []
      },
      rules: {},
      ruleForm: {
        min: [
          { required: true, message: '请输入最小值', trigger: 'blur' },
          { validator: (rule, value, callback) => this.validateValue(rule, value, callback, 'min'), trigger: 'blur' }
        ],
        max: [
          { required: true, message: '请输入最大值', trigger: 'blur' },
          { validator: (rule, value, callback) => this.validateValue(rule, value, callback, 'max'), trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    notEmpty, isEmpty,

    //  初始化
    initData() {
      const { defaultData, form: { tableData }} = this;
      tableData.push(...defaultData.map(item => {
        return {
          max: item.max,
          min: item.min
        };
      }));
    },

    //  校验数据
    validateValue(rule, value, callback, key) {
      const { form: { tableData }} = this;
      const { field } = rule;
      const fieldKeys = field.split('.');
      const index = fieldKeys[1];
      const data = tableData[index];
      const maxValue = 999999999;
      const minValue = maxValue * -1;

      if (notEmpty(data.max) && notEmpty(data.min)) {
        if (data.max < data.min) {
          const text1 = key === 'max' ? '最大值' : '最小值';
          const text2 = key === 'max' ? '最小值' : '最大值';
          const text3 = key === 'max' ? '小于' : '大于';
          callback(new Error(`${text1}不得${text3}${text2}!`));

          return;
        }
      } else {
        if (key === 'max') {
          if (value * 1 > maxValue) {
            callback(new Error(`最大值不得大于${maxValue}!`));
            return;
          } else { /**/ }
        } else if (key === 'min') {
          if (value * 1 < maxValue) {
            callback(new Error(`最小值不得小于${minValue}!`));
            return;
          } else { /**/ }
        } else { /**/ }
      }

      callback();
    },

    //  导出数据表
    deleteRow(row, index) {
      const { form: { tableData }} = this;
      tableData.splice(index, 1);
    },

    // 添加一行记录
    addRow() {
      const { form } = this;
      form.tableData.push({
        min: 0,
        max: 10
      });
    },

    //  关闭表单
    closeForm() {
      this.$emit('closeForm');
    },

    //  子组件触发form事件
    submitData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const { form: { tableData }} = this;
          const obj = {};
          const returnData = [];
          tableData.forEach(item => {
            const { max, min } = item;
            const text = `${min}~${max}`;
            if (!obj[text]) {
              const each = {
                name: text,
                min: min,
                max: max
              };
              obj[text] = each;
              returnData.push(each);
            } else { /**/ }
          });

          this.$emit('submitForm', returnData);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};

3.样式优化

提示样式必须处理，这样才能在表格内显示正常！！！

.el-form-item{
  margin-bottom: 0;
}
.sad-item-error{
  position: absolute;
  color: #F56C6C;
  top: 0;
  left: 100%;
  line-height: 32px;
}
.sad-cont{
  min-height: 200px;
}
.sad-btn2{
  padding: 2px 5px;
}

3. 效果如下