当前位置：首页 > article >正文

vue2——使用Element-UI实现可搜索的树形结构

article 2024/9/26 5:22:54

树形结构在日常开发中非常常见，例如菜单、组织架构等场景。Element-UI作为一款基于Vue.js的桌面端组件库，提供了丰富的组件供开发者使用。其中，Tree组件可以轻松实现树形结构的展示。但在实际项目中，我们往往需要实现可搜索的树形结构，以便用户能够快速找到所需节点。下面我们就来看看如何实现这一功能。

一、准备工作

确保您的项目中已经引入了Element-UI组件库。如果没有引入，请先执行以下命令：

npm install element-plus --save

2.在项目中引入Tree组件和相关样式：

import { ElTree } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-tree.css';

export default {
  components: {
    ElTree
  }
}

二、实现可搜索树形结构

定义数据结构

首先，我们需要定义树形结构的数据。以下是一个简单的示例：

data() {
  return {
    treeData: [
      {
        id: 1,
        label: '一级节点1',
        children: [
          {
            id: 2,
            label: '二级节点1-1'
          },
          {
            id: 3,
            label: '二级节点1-2'
          }
        ]
      },
      {
        id: 4,
        label: '一级节点2',
        children: [
          {
            id: 5,
            label: '二级节点2-1'
          }
        ]
      }
    ],
    filterText: ''
  };
}

2.渲染Tree组件

<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  :data="treeData"
  :props="defaultProps"
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

3.实现搜索功能

通过监听输入框的值，调用Tree组件的filter方法实现搜索功能：

watch: {
  filterText(val) {
    this.$refs.tree.filter(val);
  }
},

methods: {
  filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  }
}

查看全文

http://www.kler.cn/news/307472.html