单刀直入！Element UI 懒加载可搜索树形组件封装方法

2023-10-30 03:02:45

引言

Element UI 是一个非常受欢迎的前端组件库，它提供了许多高质量的组件，可帮助我们快速构建美观且实用的用户界面。其中，Element UI 的树形组件是一个非常强大的组件，可以用来展示层级数据。但是，默认情况下，Element UI 的树形组件并不支持搜索和懒加载。

在本文中，我们将介绍如何基于 Element UI 封装一个可搜索的懒加载树形组件。该组件将结合 Element UI 和一些自定义代码，实现强大的搜索功能和按需加载数据的功能。

创建一个新的 Vue 项目

首先，我们需要创建一个新的 Vue 项目。我们可以使用 Vue CLI 来快速创建一个项目：

vue create my-tree-component

安装 Element UI

接下来，我们需要安装 Element UI。我们可以使用 npm 来安装：

npm install element-ui

创建一个新的组件

现在，我们可以创建一个新的组件。在 src 目录下，创建一个名为 Tree.vue 的文件。

<template>
  <div class="tree-component">
    <el-tree
      :data="data"
      :props="props"
      ref="tree"
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <span>{{ data.label }}</span>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { ElTree } from 'element-ui';

export default {
  name: 'Tree',
  components: { ElTree },
  props: {
    data: {
      type: Array,
      required: true
    },
    props: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

<style>
.tree-component {
  width: 100%;
  height: 100%;
}
</style>

使用组件

现在，我们可以使用组件了。在 main.js 文件中，我们需要导入组件并将其注册为全局组件：

import Vue from 'vue';
import App from './App.vue';
import Tree from './components/Tree.vue';

Vue.component('tree-component', Tree);

new Vue({
  render: h => h(App)
}).$mount('#app');

实现搜索功能

现在，我们可以实现搜索功能了。我们需要在 Tree.vue 组件中添加一个搜索框和一个搜索按钮：

<template>
  <div class="tree-component">
    <input type="text" v-model="searchText" placeholder="Search">
    <button @click="search">Search</button>
    <el-tree
      :data="filteredData"
      :props="props"
      ref="tree"
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <span>{{ data.label }}</span>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { ElTree } from 'element-ui';

export default {
  name: 'Tree',
  components: { ElTree },
  props: {
    data: {
      type: Array,
      required: true
    },
    props: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      searchText: ''
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(node => node.label.includes(this.searchText));
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    search() {
      this.$refs.tree.filter(this.searchText);
    }
  }
};
</script>

实现懒加载功能

现在，我们可以实现懒加载功能了。我们需要在 Tree.vue 组件中添加一个 lazy 属性，并将其设置为 true：

<el-tree
  :data="data"
  :props="props"
  :lazy="true"
  ref="tree"
  @node-click="handleNodeClick"
>

同时，我们需要在 data 方法中添加一个 load 方法：

export default {
  name: 'Tree',
  components: { ElTree },
  props: {
    data: {
      type: Array,
      required: true
    },
    props: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      searchText: ''
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(node => node.label.includes(this.searchText));
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    search() {
      this.$refs.tree.filter(this.searchText);
    },
    load(node, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 1,
            label: 'Node 1',
            children: [
              {
                id: 11,
                label: 'Node 1.1'
              },
              {
                id: 12,
                label: 'Node 1.2'
              }
            ]
          },
          {
            id: 2,
            label: 'Node 2',
            children: [
              {
                id: 21,
                label: 'Node 2.1'
              },
              {
                id: 22,
                label: 'Node 2.2'
              }
            ]
          }
        ]);
      }, 1000);
    }
  }
};