element-ui树形控件节点过滤实现选择高亮

最新推荐文章于 2024-01-02 11:13:50 发布

Dream答案

最新推荐文章于 2024-01-02 11:13:50 发布

阅读量351

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/Answer0902/article/details/129048407

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
使用filters过滤器实现：

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<div id="app">
<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">
  <template slot-scope="{node}">
            <div>
              <span v-html="$options.filters.filterReal(node.label, filterText)"></span>
            </div>
          </template>
</el-tree>
</div>

var Main = {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
	filters: {
        filterReal(value, key) {
          const ind = value.indexOf(key);
          if (value.includes(key))
            return (
              value
                .split("")
                .slice(0, ind)
                .join("") +
              '<span style="color: red">' +
              key +
              "</span>" +
              value
                .split("")
                .slice(ind + key.length)
                .join("")
            );
          return `<span>${value}</span`;
        },
      },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },

    data() {
      return {
        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'
        }
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')