网站优缺点,网站流量图片生成,代理网址ip,信息流优化师工作内容本示例基于vue2 element-ui
element-ui 的官网demo是只保留到过滤值一级的#xff0c;并不会保留其子级
目标
1、Tree 树形控件 保留过滤值的子级
2、在第一次过滤数据的基础上进行第二次过滤
先看效果 Tree 树形控件 保留过滤值的子级
el-treeclassfilter-t…本示例基于vue2 element-ui
element-ui 的官网demo是只保留到过滤值一级的并不会保留其子级
目标
1、Tree 树形控件 保留过滤值的子级
2、在第一次过滤数据的基础上进行第二次过滤
先看效果 Tree 树形控件 保留过滤值的子级
el-treeclassfilter-treenode-keyid:datatreeData:propsdefaultPropsdefault-expand-allshow-checkboxcheck-changehandleCheckChange:filter-node-methodfilterNodereftree
/el-tree// 对树节点进行筛选时执行的方法
filterNode (value, data, node) {let parentNode node.parent; // 父级nodelet labels [node.label]; // 当前node的名字let level 1; // 层级while (level node.level) {labels [...labels, parentNode.label]; // 当前node名字父级node的名字parentNode parentNode.parent;level;}return labels.some((d) d.indexOf(value) ! -1);
},
在第一次过滤数据的基础上进行第二次过滤
1、下载插件库
npm install -S circular-json
2、在使用页面引入
import CircularJSON from circular-json
3、代码应用
templatediv classabout-containerh1获取过滤后的tree数据/h1el-inputclearableplaceholder第一次过滤keyup.enter.nativehandleFilter1v-modelfirstText/el-inputel-inputstylemargin-top: 10px;clearableplaceholder第二次过滤keyup.enter.nativehandleFilter2v-modelsecondText/el-inputel-button clickhandleFilter1(),handleFilter2() typeprimary iconel-icon-search搜索/el-buttondivel-treeclassfilter-treenode-keyid:datatreeData:propsdefaultPropsdefault-expand-allshow-checkboxcheck-changehandleCheckChange:filter-node-methodfilterNodereftree/el-tree/div/div
/templatescript// 在使用的组件内引入import CircularJSON from circular-jsonexport default {data() {return {// 第一次过滤firstText: ,// 第二次过滤secondText:,// tree控件的渲染值treeData: [{id: 1,label: 一级1,children: [{id: 4,label: 二级1-1,children: [{id: 9,label: 三级1-1-1,children: [{id:91,label: 四级1},{id:92,label: 四级2}]}, {id: 10,label: 三级1-1-2}]}]}, {id: 2,label: 一级2,children: [{id: 5,label: 二级2-1}, {id: 6,label: 二级2-2}]}, {id: 3,label: 一级,children: [{id: 7,label: 二级3-1}, {id: 8,label: 二级3-2},{id: 82,label: 四级3}]},{id: 31,label: 奇迹,children: [{id: 71,label: 奇迹1}, {id: 81,label: 奇迹2}]}],defaultProps: {children: children,label: label},// tree的原版备份数据deepCloneTreeData:[],// 第一次过滤后tree控件渲染数据firstFilterdata:[],}},mounted() {this.deepClone(this.treeData).then((res){this.deepCloneTreeData res;})},methods: {// 第一次过滤handleFilter1() {// 第一次过滤时没有输入值即用tree控件的原始值if(!this.firstText){this.treeData this.deepCloneTreeData;this.firstFilterdata this.deepCloneTreeData;return}this.$refs.tree.filter(this.firstText)this.firstFilterdata this.getFilterData();},// 第二次过滤handleFilter2() {// 基于第一次过滤出来的数据if(this.firstFilterdata.length 0) this.treeData this.firstFilterdata;this.$nextTick((){this.$refs.tree.filter(this.secondText);})},// 对树节点进行筛选时执行的方法filterNode (value, data, node) {let parentNode node.parent; // 父级nodelet labels [node.label]; // 当前node的名字let level 1; // 层级while (level node.level) {labels [...labels, parentNode.label]; // 当前node名字父级node的名字parentNode parentNode.parent;level;}return labels.some((d) d.indexOf(value) ! -1);},// tree 的选择事件handleCheckChange(data, checked, indeterminate) {const arr this.$refs.tree.getCheckedKeys()},// 需要获取过滤后的 Tree组件数据getFilterData() {const rootData this.$refs.tree.root;if (rootData.visible) {const childNodesStr CircularJSON.stringify(rootData.childNodes);const childNodes CircularJSON.parse(childNodesStr);const filterData this.recursionNodes(childNodes);return filterData;}},/*** 递归遍历数据* 这里解释一下为什么要用CircularJSON这个插件因为element tree* node数据存在一个对象里的子项存在循环引用存在循环引用的对象*/recursionNodes(childNodes) {const nodes childNodes;const result [];for (const item of nodes) {if (item.visible) {result.push(item.data);}if (item.childNodes item.childNodes.length) {const tempResult this.recursionNodes(item.childNodes);item.data.children tempResult;}}return result;},/*** 深拷贝*/deepClone(obj){return new Promise((resolve) {const { port1,port2 } new MessageChannel();port1.postMessage(obj);port2.onmessage (msg) {resolve(msg.data)}})}},}
/script
