Vue AntDesign可搜索的树(只展示搜索结果并展开)
项目中用到的树结构数据太多,领导觉得AntDesign中把搜索到关键字的层级展开也不是很直观,所以要求只展示搜索到的数据并且展开层级文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,
·
前言
项目中用到的树结构数据太多,领导觉得AntDesign中把搜索到关键字的数据层级展开也不是很直观,所以要求只展示搜索到的数据并且展开层级。
一、dom结构
就是去antDesign 复制可搜索树结构就可以了,我这里还加了输入即刻检索
<a-input-search style="margin-bottom: 8px" placeholder="Search" v-model="searchVal" @change="searchOnChange" @search="onSearch" />
<a-tree
:expanded-keys="iExpandedKeys"
:auto-expand-parent="autoExpandParent"
:tree-data="showData"
@expand="onExpand"
:replace-fields="{children:'children', key:'id', value: 'id', title: 'label'}"
>
<template slot="label" slot-scope="{ label}">
<span v-if="label.indexOf(searchValue) > -1">
{{ label.substr(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ label.substr(label.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ label}}</span>
</template>
</a-tree>
二、保存一份完整数据
1.定义数据
在data中定义两个变量,一个showData(用于树的真实展示数据),一个defaultData(全部数据的备份,用于清除搜索条件时展示全部数据)
data () {
return {
showData: [],
defaultData: [],
expandedKeys:[],
searchVal: "",
searchValue: "",
iExpandedKeys: [],
autoExpandParent: true,
}
}
2.存数据
mounted () {
this.getTreeData ();
},
methods: {
getTreeData () {
this.showData = [];
this.defaultData = [];
//调用获取数据的接口
getTreeData().then((res) => {
for (let i = 0; i < res.result.length; i++) {
let temp = res.result[i]
this.defaultData.push(JSON.parse(JSON.stringify(temp)))
this.showData = [...this.defaultData];
this.recursionData(this.defaultData);//将每一层数据都赋上title的slot,以高亮显示搜索字段
this.setThisExpandedKeys(temp)
// console.log(temp.id)
}
})
},
recursionData (node) {
node.forEach(item => {
item.scopedSlots = { title: 'label' }
if (item.children && item.children.length) {
this.recursionData(item.children)
}
})
},
setThisExpandedKeys(node) {
//只展开一级目录
if (node.children && node.children.length > 0) {
this.iExpandedKeys.push(node.id)
//下方代码放开注释则默认展开所有节点
// for (let a = 0; a < node.children.length; a++) {
// this.setThisExpandedKeys(node.children[a])
// }
}
},
onExpand(expandedKeys) {
this.iExpandedKeys = expandedKeys
this.autoExpandParent = false
},
}
三、定义搜索方法,删除未匹配数据
methods: {
searchOnChange () {
this.showData= [...this.defaultData];
if (this.searchVal) {
this.onSearch(this.searchVal);
} else {
this.searchValue = "";
this.iExpandedKeys = [this.showData[0].id];
}
},
onSearch(val){
const value = val
this.searchValue = value
if (value != '') {
let treeData = JSON.parse(JSON.stringify(this.showData));
// 删除四级中未匹配到的数据
this.deleteTreedata(treeData, val, 4);
// 删除三级数据中未匹配到的数据
this.deleteTreedata(treeData, val, 3);
// 删除二级数据中未匹配到的数据
this.deleteTreedata(treeData, val, 2);
this.showData= [...treeData];
// 展开所有树数据
this.expandAll(this.showData);
} else {
this.iExpandedKeys = [this.showData[0].id];
}
},
deleteTreedata (node, val, level) {
//这里注意数组一定要从后面对比删除,否则数组从前面删了以后,顺序就乱掉,就只能删第一个了
for (let len = node.length - 1; len >= 0; len--) {
if (node[len].children && node[len].children.length) {
this.deleteTreedata(node[len].children, val, level)
} else {
if (node[len].level == level) {
let str = node[len].label;
if (str.indexOf(val) < 0) {
node.splice(len, 1);
}
}
}
}
},
expandAll (node) {
console.log('nodenode', node);
node.forEach(item => {
if (item.children && item.children.length) {
this.iExpandedKeys.push(item.id)
this.expandAll(item.children)
}
})
},
}
测试数据
随便写了一个测试数据,可以试一下,大概就是这个格式
testData: [
{
id: '1',
label: '中国',
level: '1',
children: [
{
id: '2',
label: '山东',
level: '2',
children: [
{
id: '4',
label: '济南',
level: '3',
children: [
{
id: '5',
label: '槐荫区',
level: '4'
},
{
id: '6',
label: '市中区',
level: '4'
},
{
id: '7',
label: '历城区',
level: '4'
},
{
id: '8',
label: '历下区',
level: '4'
},
]
}
]
},
{
id: '3',
label: '河北',
level: '2',
children: [
{
id: '9',
label: '廊坊',
level: '3'
}
]
}
]
}
],
重新改了一点东西,上传了git,简单的小demo
更多推荐
已为社区贡献1条内容
所有评论(0)