微信网站建设咨询,企业主页图片,网站开发的实施方案,山东省建设备案在哪个网站第一种#xff08;直接展开并高亮关键字#xff09;
效果图这样的#xff0c;会把所有的有这些关键字的节点都展开 代码#xff1a; 这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来 然后通过setCheckedKeys方法把他展开选中 然后通过filterReal把关键字高亮…第一种直接展开并高亮关键字
效果图这样的会把所有的有这些关键字的节点都展开 代码 这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来 然后通过setCheckedKeys方法把他展开选中 然后通过filterReal把关键字高亮标蓝
bodydiv idapp stylepadding:10px;!-- 查询框 --input classel-textarea__inner v-model.lazytitle placeholder请输入菜单名称stylemargin-left:10px;width: 220px; keyup.entergetlists/input!-- 树形菜单 --el-tree :datadata2 node-keyid :propsdefaultProps:highlight-currentgaoliang :default-expanded-keysopenkeys :default-expand-allclosed:show-checkboxshow_checkboxd reftree2span classcustom-tree-node slot-scope{ node, data }span v-html$options.filters.filterReal(node.label, title)/span/span/el-tree/div
/body
script typetext/javascriptlet v new Vue({el: #app,filters: {filterReal(value, key) {const ind value.indexOf(key);if (value.includes(key))return (value.split().slice(0, ind).join() span classkey-word key /span value.split().slice(ind key.length).join());return span${value}/span;},},data() {return {data2: [],//列表defaultProps: {children: children,label: title},title: ,//查询openkeys:[]}},methods: {getlists() {// this.$refs.tree2.filter(this.title);// returnlet that thisif (that.title ! ) {that.openkeys []that.$refs.tree2.setCheckedKeys(that.openkeys);//清空节点选择节点收起let arr []that.openkeys this.getAllId(arr, this.data2) //递归拿到查询的所有关键字节点idthat.$refs.tree2.setCheckedKeys(that.openkeys)//根据这些id展开节点}},// 递归查询treegetAllId(keys, dataList) {let thatthisif (dataList dataList.length) {for (let i 0; i dataList.length; i) {if(dataList[i].title.includes(that.title)){keys.push(dataList[i].id) //查询关键字相同的id添加进去}if (dataList[i].children) {keys this.getAllId(keys, dataList[i].children)}}}return keys},}})
/script
style scoped/style/html第二种过滤之后再关键字高亮
这个是用的官方文档的那个过滤方式可以参考官方文档看一下。 只不过高亮关键字用这里的 核心写法和上面一样变动的只有两个地方 1在tree标签上加上这句话:filter-node-methodfilterNode这个方法复制下面的 只需要把data.title修改成你字段的名字就行比如你的字段叫name就是data.name。 如果是lable就是data.lable。其他的不用动 2差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值
bodydiv idapp stylepadding:10px;!-- 查询框 --input classel-textarea__inner v-model.lazytitle placeholder请输入菜单名称stylemargin-left:10px;width: 220px; keyup.entergetlists/input!-- 树形菜单 --el-tree :datadata2 node-keyid :propsdefaultProps:highlight-currentgaoliang :default-expanded-keysopenkeys :default-expand-allclosed:show-checkboxshow_checkboxd reftree2 :filter-node-methodfilterNodespan classcustom-tree-node slot-scope{ node, data }span v-html$options.filters.filterReal(node.label, title)/span/span/el-tree/div
/body
script typetext/javascriptlet v new Vue({el: #app,filters: {filterReal(value, key) {const ind value.indexOf(key);if (value.includes(key))return (value.split().slice(0, ind).join() span classkey-word key /span value.split().slice(ind key.length).join());return span${value}/span;},},data() {return {data2: [],//列表defaultProps: {children: children,label: title},title: ,//查询openkeys:[]}},methods: {filterNode(value, data) {if (!value) return true;return data.title.indexOf(value) ! -1;},getlists() {this.$refs.tree2.filter(this.title);},}})
/script
