工作记录 -- el-tree的一些常用设置及注意事项

太过爱你忘了你带给我的痛 2023-01-13 06:18 24阅读 0赞

### 文章目录 ###

*   *   *  表单中的el-tree表单项非空校验
         *  el-treed的一些属性
         *  给el-tree增加全选checkbox根节点
         *  按需实现checkbox禁止勾选（disabled）

### 表单中的el-tree表单项非空校验 ###

正常的el-form-item属性props是不起作用的，可以用`@check-change`

<el-tree
       :show-checkbox="true"
       :data="resourceList"
       :props="props"
       node-key="pkResource"
       ref="resourceTree"
       :default-expanded-keys="visible ? ['全选'] : []"
       :default-checked-keys="ruleForm.resources"
       @check-change="treeNodeCheck">
     >
     ...
     </el-tree>

// 给绑定的值及时赋值就可以了
    treeNodeCheck() {
        
         let tmpList = [];
         this.$refs["resourceTree"].getCheckedKeys(true).forEach((item) => {
        
             tmpList.push({
         pkResource: item });
         });
         this.ruleForm.resources = tmpList;
     }

--------------------

### el-treed的一些属性 ###

*  `label` 指定节点标签为节点对象的某个属性值 string, function(data, node)
 *  `children` 指定子树为节点对象的某个属性值 string
 *  `disabled`指定节点选择框是否禁用为节点对象的某个属性值boolean, function(data, node)
 *  `isLeaf` 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 boolean, function(data, node)

--------------------

### 给el-tree增加全选checkbox根节点 ###

在data赋值之前进行处理

let tempArr = [];
    const allCheckedData = [
      {
        
        pkResource: "全选",
        resourceName: "全选",
        resourceCode: "全选",
        children:this.filterResourceTree(res.data)
      }
    ];
    tempArr= allCheckedData;
    this.resourceList = tempArr.length ? tempArr : [];

并且指定默认展开的项

<el-tree
      :default-expanded-keys="visible ? ['全选'] : []"
      :default-checked-keys="ruleForm.resources"
     />

指定默认勾选的，可以实现回显

--------------------

### 按需实现checkbox禁止勾选（disabled） ###

将disabledUserFn写入methods，就能避免在data中定义时拿不到this的值的问题  
但数据过多时会有性能问题，树加载很慢，网页会卡住。。

//data
    props: {
        
        children: "children",
        label: "name",
        disabled: this.disabledRulesFn
    },
    propsUserTree: {
        
        children: "children",
        label: "nodename",
        disabled: this.disabledUserFn
    },
    //methods
    disabledUserFn(data, node) {
        
        let isTrue = false;
        let o = JSON.parse(
            window.localStorage.getItem("systemInfo")
        ).currentUser;
        if (
            (data.nodetype == 0 &&
                !(data.children && data.children.length)) ||
            (o && o.pkUser == data.datapk) ||
            (this.formData.isDefault == 'Y')
        ) {
        
            isTrue = true;
        }
        return isTrue;
    },
    
    disabledRulesFn() {
        
        if(this.formData.isSys == 'Y') return true;
        return false;
    },