vue 实现树选项

Vue 实现树形选项的方法

使用递归组件实现树形结构

递归组件是Vue中实现树形结构的常见方式。定义一个组件，该组件可以调用自身来渲染子节点。

<template>
  <div>
    <div @click="toggle">
      {{ node.name }}
    </div>
    <div v-if="isOpen" v-for="child in node.children" :key="child.id">
      <tree-node :node="child"></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用第三方库

Element UI和Ant Design Vue等UI库提供了现成的树形组件，可以快速实现树形选项功能。

Element UI示例：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    @check-change="handleCheckChange">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1'
        }]
      }]
    }
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    }
  }
}
</script>

动态加载树节点

对于大数据量的树形结构，可以实现动态加载功能，当用户展开节点时才加载子节点数据。

<template>
  <el-tree
    :props="props"
    :load="loadNode"
    lazy
    @node-click="handleNodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }]
        resolve(data)
      }, 500)
    },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

自定义树节点样式

可以通过scoped slot自定义树节点的显示内容和样式。

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)">
          添加
        </el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    append(data) {
      console.log('append', data)
    },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

树形结构的搜索过滤

实现树形结构的搜索功能，可以过滤显示符合条件的节点。

<template>
  <div>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      class="filter-tree"
      :data="treeData"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree">
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

这些方法涵盖了Vue中实现树形选项的主要技术方案，可以根据项目需求选择合适的实现方式。