element-tree搜索高亮

最新推荐文章于 2025-04-15 15:46:57 发布

未了丶

最新推荐文章于 2025-04-15 15:46:57 发布

阅读量457

点赞数

分类专栏：常用文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/liu18130617928/article/details/128134604

版权

常用专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用 Element UI 实现的树形选择器示例，包括按钮触发对话框、树形结构的展开与过滤功能。通过 Vue.js 和 Element UI 的结合，展示了如何动态加载和操作树形数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
    </el-input>
    <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
      ref="tree">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <div v-html="node.label"></div>
      </span>
    </el-tree>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        visible: false,
        filterText: '',
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {
      handleLabelReg(label, searchStr) {
        const reg = new RegExp(searchStr, 'gi');
        let start = 0;
        let end = 0;
        let newStr = '';
        let arr;
        while ((arr = reg.exec(label)) !== null) {
          end = arr.index;
          newStr = newStr + label.slice(start, end);
          start = end;
          end = reg.lastIndex;
          newStr = newStr + `<span style="color: blue">${label.slice(start, end)}</span>`
          start = end;
        }
        newStr = newStr + label.slice(end)
        return newStr
      },
      filterNode(value, data) {
        data.label = data.label.replace(/<[^>]*>|/g, '')
        if (!value) return true;
        if (data.label.indexOf(value) !== -1) {
          data.label = this.handleLabelReg(data.label, value)
        }
        return data.label.indexOf(value) !== -1;
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  })
</script>

</html>