element tree 校验

现状 1.后台一次性返回2层数据，但是需要添加一个全选功能，所以数据结构都是三层
html

  <el-form-item  label="菜单权限" prop="sectionUserPoList">
                <el-tree
                        v-model="dialogForm.sectionUserPoList"
                        class="ztree"
                        accordion
                        :data="listTree"
                        show-checkbox
                        ref="tree"
                        node-key="sectionCode"
                        :default-expanded-keys="[0]"
                        :default-checked-keys="sectionColumnsCheckedList"
                        :props="defaultProps"
                        @check-change="handleCheckChange"
                        @check="handleCheckedSectionColumns"
                >
                </el-tree>
            </el-form-item>

data里面

dialogForm: {
                   sectionUserPoList:[]
               },

 dialogFormRules: {
                   sectionUserPoList: [{required: true, validator: sectionUserPoListChecked, trigger: 'change'}]
               },

return 上面写校验
let sectionUserPoListChecked=(rule, value, callback)=>{
               if(this.dialogForm.sectionUserPoList.length===0){
                   return callback(new Error('请选择菜单'));
               }else{
                   callback();
               }
           };

js 只需要在handleCheckChange 校验的方法中把获取选中的长度给的data里面his.dialogForm.sectionUserPoList.length就可以了

//校验的时候用
            handleCheckChange() {
                let checkedTreeData=this.$refs.tree.getCheckedNodes();
                this.dialogForm.sectionUserPoList.length=checkedTreeData.length
            },