基于 Vue 的树形选择组件的示例代码

下面就来详细讲解“基于 Vue 的树形选择组件的示例代码”的完整攻略。

树形选择组件介绍

树形选择组件自然而然需要展示一个树形结构的数据，并支持多选、异步加载等功能。利用 Vue 的模板语法和生命周期函数，我们可以轻松地实现这样一个组件。

树形选择组件示例代码

<template>
  <div class="tree-select">
    <div class="search">
      <input v-model="searchText" placeholder="搜索节点" />
    </div>
    <div class="tree">
      <tree-node :node="rootNode" :search-text="searchText" @select="handleSelect" />
    </div>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  name: 'TreeSelect',
  components: {
    TreeNode
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Array],
      default: ''
    }
  },
  data() {
    return {
      searchText: '',
      selectedNode: null
    };
  },
  computed: {
    rootNode() {
      const rootNode = {
        id: '',
        label: '根节点',
        children: this.data
      };
      return rootNode;
    },
    selectedNodeIds() {
      if (Array.isArray(this.value)) {
        return this.value;
      } else {
        return this.value.split(',');
      }
    }
  },
  methods: {
    handleSelect(node) {
      if (this.selectedNodeIds.includes(node.id)) {
        this.selectedNodeIds.splice(this.selectedNodeIds.indexOf(node.id), 1);
      } else {
        this.selectedNodeIds.push(node.id);
      }
      this.$emit('input', this.selectedNodeIds);
    }
  }
};
</script>