element ui tree组件 的使用

Hello!掘金的小伙伴们大家好，我是 # 摸鱼小公举 ,昨天写了一篇  CSS+JS实现土味中秋特效 的技术文章进步那么一丢丢,有人点赞和评论了;希望大家能多多支持;谢谢!今天我们来学习一下element ui tree组件 的使用 !

正文要开始咯~

这里是拿到选中的值拼接成字符串传给后台

首先拿到后台数据处理成组件的数据结构

禁止选中

if(arr[i]id =='15'){
arr[i].disabled = true
}

通过此事件拿到选中的值id

this.$refs.tree.getCheckedNodes() 打印出的数据

getCheckedNodes:
说明:若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组
参数:(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 `false` 2. 是否包含半选节点，默认值为 `false`

handleNodeClick(data) {
            this.nodeList = [];
            if (this.$refs.tree.getCheckedNodes()) {
                for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
                    if (this.$refs.tree.getCheckedNodes()[i].pid != 0) {
                        this.nodeList.push(this.$refs.tree.getCheckedNodes()[i].pid);
                    }
                    this.nodeList.push(this.$refs.tree.getCheckedNodes()[i].id);
                }

            }
        }
        
check事件当复选框被点击的时候触发;
参数:共两个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

这里拿到的id 通常父id会重复,所以需要过滤掉重复的id;

for (var i = 0; i < this.nodeList.length; i++) {
                    if (this.nodeData.indexOf(this.nodeList[i]) == -1) {
                        this.nodeData.push(this.nodeList[i]);
                    }
                }
                var nodeDataList = this.nodeData.join(",");

拿到后台数据复显出来并且编辑提交数据

后台返回的数据是这样的

rules:"16,17,18,20,21,22"

需要处理成数组的结构

var ruleList = res.data.rules.split(',');
                    var ruleListsArr = [];
                    var ruleArr = [];
                    for (var i = 0; i < ruleList.length; i++) {
                        ruleArr.push(ruleList[i]);
                        var obj = {};
                        obj.id = ruleList[i];
                        ruleListsArr.push(obj);
                    }

处理后的数据结构如下

在mounted函数里面调用设置已选中的节点

setTimeout(() => {
//等组件生成再调用init;
this.$refs.tree.setCheckedNodes(ruleListsArr);

setCheckedNodes:
说明:设置目前勾选的节点，使用此方法必须设置 node-key 属性
参数:(nodes) 接收勾选节点数据的数组

如果数据没做过滤,那么选中的效果有父id选中的z子id 全部都会选中

let checkedArr = [];

 for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
  checkedArr.push(this.$refs.tree.getCheckedNodes()[i].id);
                        }
                        let array = ruleArr.map(Number);
                        let filterArr = checkedArr.filter(function(val) {
                            return array.indexOf(val) == -1;
                        });

                        for (let k = 0; k < filterArr.length; k++) {
                            this.$refs.tree.setChecked(filterArr[k], false);
                        }
                    }, 200);

过滤完之后就只显示我选中的那些id了

结语:

这是我之前做项目的经验总结;有什么不对的地方欢迎指教;好了,文章到这来就结束了;非常感谢大家阅读。