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