最近需求想要一個(gè)樹(shù)狀結(jié)構(gòu)的帶搜索功能的目錄，要求目錄包含搜索文字的高亮，如果父級(jí)收起則父級(jí)高亮，如果跨級(jí)收起 則收起的級(jí)別高亮 不限制層級(jí)

例如：搜索文字為D，收起C則C高亮， 直接收起A則A高亮

A??

????????B

????????????????C?

????????????????????????D?

代碼如下：

HTML代碼：

<el-input
    v-model="text"
    placeholder="搜索"
    clearable>
</el-input>
<el-tree
  :data="data"
  :props="props"
   default-expand-all
   node-key="id"
   highlight-current
   ref="tree"
   :filter-node-method="filterNode"
   @node-collapse="closeNode"
   @node-expand='expandNode'
   @check="handleCheckChange">
     <span slot-scope="{ node }" class="custom-tree-node">
         <span v-if="!text">{{ node.label }}</span>
         <span v-else-if="nodeArr && nodeArr.indexOf(node.label) > -1" v-html=" `<font style='color:red'>${node.label}</font>`" />
         <span v-else-if="text" v-html="node.label.indexOf(text) > -1 ? `<font style='color:red'>${node.label}</font>` : `<font>${node.label}</font>`" />
     </span>
</el-tree>

JS代碼：

data: {
    text: '',
    nodeArr: []
}
methods: {
    filterNode(value, data, node) {},
    // 循環(huán)遞歸
    getKeys(data, name) {
       if (data.length != 0) {
          data.forEach((item) => {
             if (item.name.indexOf(this.text) > -1) {
                  this.nodeArr.push(name);
             }
             if (this.nodeArr.indexOf(item.name) > -1) {
                  this.nodeArr.push(data.name);
             }
             if (item.children != null) {
                  this.getKeys(item.children, name);
             }
          });
       }
    },
    // 收起
    closeNode(value, data, node) {
        if (value.name.indexOf(this.text) == -1) {
            this.getKeys(value.children, value.name);
        }
    }，

    // 展開(kāi)
    expandNode(value, data, node) {
        if (this.nodeArr.indexOf(value.name) > -1) {
            this.nodeArr.splice(this.nodeArr.indexOf(value.name), 1);
        }
    }
}

注意：

1.?text清空時(shí)記得將nodeArr清空

2. 這個(gè)方法在搜索的時(shí)候?qū)?shù)形結(jié)構(gòu)全部展開(kāi)，如果想要保持原來(lái)的結(jié)構(gòu)不變，default-expand-all屬性去掉，并在請(qǐng)求時(shí)進(jìn)行循環(huán)遞歸一次 獲取高亮的值放入nodeArr中文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-861813.html

到了這里，關(guān)于element UI tree 搜索功能實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！