项目开发是用的vue+ant-design-vue
最近收到一个新的搜索需求,需要对目录树进行搜索,并将搜索到的值进行高亮与展开显示。
废话不多说直接上代码,以下代码只是一个简单的demo。
<template>
<div>
<a-input-search v-model="searchStr" placeholder="输入搜选项" style="width:200px;" @search="onSearch"></a-input-search>
<!-- selectedKeys是选中项key的集合,expandedKeys是展开项key的集合 -->
<a-tree
v-model="checkedKeys"
:treeData="treeData"
:selectedKeys="selectedKeys"
:expandedKeys="expandedKeys"
@expand="onExpand"
:autoExpandParent="autoExpandParent"
:replaceFields="replaceFields"
@select="onSelect"
>
<template slot='title' slot-scope={
name}>
<span v-html="name.replace(new RegExp(searchValue,'g'),'<span style=color:#f50>'+ searchValue +'</span>')"></span>
</template>
</a-tree>
</div>
</template>
<script>
const treeData = [
{
name: '0-0',
key: '0-0',
scopedSlots: {
title: "title"},
children: [
{
name: '0-0-0',
key: '0-0-0',
scopedSlots: {
title: "title"},
children: [
{
name: '0-0-0-0', key: '0-0-0-0',scopedSlots:{
title: "title"},children:[
{
name: '0-0-0-0-0', key: '0-0-0-0-0',scopedSlots:{
title: "title"}, children:[
{
name: '0-0-0-0-0-0', key: '0-0-0-0-0-0',scopedSlots:{
title: "title"}},
{
name: '0-0-0-0-0-1', key: '0-0-0-0-0-1',scopedSlots:{