国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【el-tree查詢并高亮】vue使用el-tree組件,搜索展開并選中對(duì)應(yīng)節(jié)點(diǎn),高亮搜索的關(guān)鍵字,過濾后高亮關(guān)鍵字,兩種方法

這篇具有很好參考價(jià)值的文章主要介紹了【el-tree查詢并高亮】vue使用el-tree組件,搜索展開并選中對(duì)應(yīng)節(jié)點(diǎn),高亮搜索的關(guān)鍵字,過濾后高亮關(guān)鍵字,兩種方法。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

第一種(直接展開并高亮關(guān)鍵字)

效果圖這樣的,會(huì)把所有的有這些關(guān)鍵字的節(jié)點(diǎn)都展開
【el-tree查詢并高亮】vue使用el-tree組件,搜索展開并選中對(duì)應(yīng)節(jié)點(diǎn),高亮搜索的關(guān)鍵字,過濾后高亮關(guān)鍵字,兩種方法,功能實(shí)現(xiàn),vue.js,elementui,javascript,el-tree,tree過濾選中高亮
代碼:
這里的邏輯就是通過遞歸循環(huán)把所有和關(guān)鍵字匹配的節(jié)點(diǎn)篩選出來
然后通過setCheckedKeys方法把他展開選中
然后通過filterReal把關(guān)鍵字高亮標(biāo)藍(lán)

<body>
    <div id="app" style="padding:10px;">
        <!-- 查詢框 -->
        <input class="el-textarea__inner" v-model.lazy="title" placeholder="請(qǐng)輸入菜單名稱"
            style="margin-left:10px;width: 220px;" @keyup.enter="getlists"></input>
        <!-- 樹形菜單 -->
        <el-tree :data="data2" node-key="id" :props="defaultProps"
            :highlight-current="gaoliang" :default-expanded-keys="openkeys" :default-expand-all="closed"
            :show-checkbox='show_checkboxd' ref="tree2">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-html="$options.filters.filterReal(node.label, title)"></span>
            </span>
        </el-tree>
    </div>
</body>
<script type="text/javascript">
    let 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 class="key-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);
                // return
                let that = this
                if (that.title != '') {
                    that.openkeys = []
                    that.$refs.tree2.setCheckedKeys(that.openkeys);//清空節(jié)點(diǎn)選擇,節(jié)點(diǎn)收起
                    let arr = []
                    that.openkeys = this.getAllId(arr, this.data2) //遞歸拿到查詢的所有關(guān)鍵字節(jié)點(diǎn)id
                    that.$refs.tree2.setCheckedKeys(that.openkeys)//根據(jù)這些id展開節(jié)點(diǎn)
                }
            },
            // 遞歸:查詢tree
            getAllId(keys, dataList) {
                let that=this
                if (dataList && dataList.length) {
                    for (let i = 0; i < dataList.length; i++) {
                        if(dataList[i].title.includes(that.title)){
                            keys.push(dataList[i].id) //查詢關(guān)鍵字相同的id添加進(jìn)去
                        }
                        if (dataList[i].children) {
                            keys = this.getAllId(keys, dataList[i].children)
                        }
                    }
                }
                return keys
            },
        }
    })
</script>
<style scoped>

</style>

</html>

第二種(過濾之后再關(guān)鍵字高亮)

這個(gè)是用的官方文檔的那個(gè)過濾方式,可以參考官方文檔看一下。
只不過高亮關(guān)鍵字用這里的
核心寫法和上面一樣,變動(dòng)的只有兩個(gè)地方
1,在tree標(biāo)簽上加上這句話:filter-node-method="filterNode"這個(gè)方法復(fù)制下面的,
只需要把data.title修改成你字段的名字就行,比如你的字段叫name就是data.name。
如果是lable就是data.lable。其他的不用動(dòng)
2,差的時(shí)候調(diào)用這個(gè)this.$refs.tree2.filter(this.title);里面的title就是你搜索的值文章來源地址http://www.zghlxwxcb.cn/news/detail-606866.html

<body>
    <div id="app" style="padding:10px;">
        <!-- 查詢框 -->
        <input class="el-textarea__inner" v-model.lazy="title" placeholder="請(qǐng)輸入菜單名稱"
            style="margin-left:10px;width: 220px;" @keyup.enter="getlists"></input>
        <!-- 樹形菜單 -->
        <el-tree :data="data2" node-key="id" :props="defaultProps"
            :highlight-current="gaoliang" :default-expanded-keys="openkeys" :default-expand-all="closed"
            :show-checkbox='show_checkboxd' ref="tree2" :filter-node-method="filterNode">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-html="$options.filters.filterReal(node.label, title)"></span>
            </span>
        </el-tree>
    </div>
</body>
<script type="text/javascript">
    let 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 class="key-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>

到了這里,關(guān)于【el-tree查詢并高亮】vue使用el-tree組件,搜索展開并選中對(duì)應(yīng)節(jié)點(diǎn),高亮搜索的關(guān)鍵字,過濾后高亮關(guān)鍵字,兩種方法的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包