美文网首页
el-form中的el-tree加表单校验

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

作者: Frank_Fang | 来源:发表于2021-10-12 18:51 被阅读0次

    全选时会显示错误

    <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'
            }
    ...
    

    相关文章

      网友评论

          本文标题:el-form中的el-tree加表单校验

          本文链接:https://www.haomeiwen.com/subject/qhkjoltx.html