el-form中的el-tree加表单校验

2021-10-12  本文已影响0人  Frank_Fang

全选时会显示错误

<el-form :model="exportForm" ref="exportForm" :rules="exportRules" label-width="120px">
        <el-form-item :label="$t('table.dept')" prop="departmentIds">
          <div>
            <el-button type="text" size="mini" @click="selectOrgTree(true)">{{ $t('sys.selectAll') }}</el-button>
            <el-button type="text" size="mini" @click="selectOrgTree()">{{ $t('sys.deselectAll') }}</el-button>
          </div>
          <div class="tree-box">
            <el-tree ref="orgTree" @check="departmentIdsChange" :data="departData" node-key="id" @check-change="getCopyDeptList" check-strictly show-checkbox default-expand-all :default-checked-keys="deptIds" :props="propsTree" highlight-current></el-tree>
          </div>
        </el-form-item>
...
</el-form>

校验规则

methods: {
    validateTree (rule, value, callback) {
      const arr = this.$refs.orgTree.getCheckedKeys()
      if (arr.length === 0 || !arr) {
        callback(new Error(this.$t('placeholder.select')))
      } else {
        callback()
      }
    }
...
computed: {
exportRules () {
      return {
        departmentIds: {
          required: true,
          validator: this.validateTree,
          message: this.$t('placeholder.select'),
          trigger: 'change'
        }
...
上一篇下一篇

猜你喜欢

热点阅读