element ui tree组件 的使用

·  阅读 973
element ui tree组件 的使用

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

u=1821087181,3453350811&fm=173&app=49&f=JPEG.jpg

正文要开始咯~

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

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

1631254770.png

禁止选中

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

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

1631255422.png

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

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

1631255491.png

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);
                    }
复制代码

处理后的数据结构如下

1631256603.png

在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了

结语:

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改