查询框输入要查询的关键字以后点击查找
展示查找的元素并且将关键字置红
这边我使用的是vex-table的树形表格中=>实现树结构深层查找
<template>
<a-card>
<a-row :gutter="16">
<a-col :span="5">
<a-row>
<a-col span="20">
<a-input placeholder="名称" size="small" allowClear v-model="filterTitle">
<a-icon slot="prefix" type="search" />
</a-input>
</a-col>
<a-col span="4">
<vxe-button size="mini" @click="setTreeExpand" style="height: 24px;">查找</vxe-button>
</a-col>
</a-row>
<vxe-table ref="xTree" size="mini" max-height="600" highlight-hover-row :loading="loading" :data="tableData" :tree-config="{children: 'children',line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
<vxe-table-column field="name" title="名称" tree-node>
<template v-slot="{ row }" style="height:22px">
<span>
//给元素加了图标
<template v-if="row.children && row.children.length">
<i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
</template>
<template v-else>
<i class="tree-node-icon fa fa-file-o"></i>
</template>
<span style="margin-left: 4px;">
<a-button type="link" v-html="row.name"></a-button>
</span>
</span>
</template>
</vxe-table-column>
</vxe-table>
</a-col>
</a-row>
</a-card>
</template>
import XEUtils from 'xe-utils'
export default {
data() {
return {
filterTitle: '',
loading: false,
originData: [],
tableData: [],
}
},
created() {
this.loading = true
setTimeout(() => {
const list = [
{ id: 1, name: '从入门到放弃1' },
{
id: 2,
name: '从入门到放弃2',
children: [
{ id: 3, name: '从入门到放弃2-1' },
{ id: 4, name: '从入门到放弃2-2' },
{
id: 5,
name: '从入门到放弃2-3',
children: [
{
id: 6,
name: '从入门到放弃2-3-1',
children: [{ id: 7, name: '从入门到放弃2-3-1-1' }],
},
{ id: 8, name: '从入门到放弃2-3-2' },
{ id: 9, name: '从入门到放弃2-3-3' },
],
},
],
},
{ id: 11, name: '从入门到放弃3' },
{ id: 11, name: '从入门到放弃4' },
]
this.loading = false
this.originData = list
this.tableData = this.originData
}, 300)
},
methods: {
setTreeExpand() {
// 查找关键字展开与之相关的所有节点,其他无关系的节点关闭掉
//组件本身的事件,使用了xe-utils中的searchTree方法,从树结构中根据回调查找数据
const filterName = XEUtils.toString(this.filterTitle).trim().toLowerCase()
if (filterName) {
const options = { children: 'children' }
const searchProps = ['name']
this.tableData = XEUtils.searchTree(
this.originData,
(item) => searchProps.some((key) => XEUtils.toString(item[key]).indexOf(filterName) > -1),
options
)
//替换查找关键字的样式
//这里我用了xe-utils中的eachTree方法,从树结构中遍历数据的键、值、路径,遍历数据中的name字段,将其关键字替换成有红色样式的
this.$nextTick(() => {
this.$refs.xTree.setAllTreeExpand(true)
})
let replaceReg = new RegExp(filterName, 'g')
let replaceString = `<span class="search-text" >${filterName}</span>`
XEUtils.eachTree(this.tableData, (item) => (item.name = item.name.replace(replaceReg, replaceString)))
} else {
this.tableData = this.originData
}
},
},
}