版本: 2.9.2

自定表单组件的验证

业务开发中会遇到组件库没有的表单组件，这个时候就会涉及到验证问题

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
<el-form>

如过把<el-input>换成自定义的组件，则可以通过inject: ["elFormItem"]获得<el-form-item>实例在值发生变化的时候，在组件内部调用this.elFormItem.validate() 从而避免在组件外面使用

this.$nextTick(() => {
  this.$refs.form.validateField("name");
});

表单的行选中

需要注意的是，选中一行需要"一行的渲染数据"，而不仅仅是”唯一的key"

<el-table-column
  type="selection"
  :reserve-selection="true"
>
</el-table-column>

reserve-selection这个属性没起效果，采用另一种方案

<el-table
  row-key="id"
  ref="table"
  @select-all="handleSelect"
  @select="handleSelect"
>
</el-table>

  data() {
    return {
      selectRowObj: {},
      }
    };
  },

  methods: {
    handleSelect(rows) {
      rows.forEach(item => {
        this.selectRowObj[item.id] = item;
      });
    },
  }

切换页面时要主动触发选中

Object.keys(this.selectRowObj).forEach(key => {
  this.$refs.table.toggleRowSelection(this.selectRowObj[key], true);
});

使用对象去记录的原因有两点

第一页选中了几行，切换到第二页，再次选中，是不会记录上一次的选中的
toggleRowSelection也会触发选中事件

element-ui使用技巧

自定表单组件的验证

表单的行选中