Vue ElementUI el-tree 技巧：轻松掌握数据绑定与显示

2024-01-21 18:42:11

使用 Vue ElementUI el-tree 组件轻松掌握数据绑定和显示

前言

Vue ElementUI el-tree 组件是构建强大数据结构可视化的利器。本文将引导您深入了解其数据绑定和显示技巧，让您轻松驾驭这一强大组件。

数据绑定：让数据流动

使用 :data 属性

el-tree 组件通过 :data 属性与数据源绑定。这个属性接受一个数组，数组中每个元素代表一个树节点。

<el-tree :data="treeData"></el-tree>

丰富的数据属性

除了 :data 之外，el-tree 还提供了其他数据属性，用于控制节点的各种特性。

:props - 绑定节点属性
:default-expand-all - 控制是否默认展开所有节点
:check-on - 设置复选框是否默认选中

示例代码

<el-tree
  :data="treeData"
  :props="nodeProps"
  :default-expand-all="true"
></el-tree>

显示：掌控组件呈现

事件和方法

el-tree 组件提供了丰富的事件和方法，让您掌控其显示行为。

node-click - 监听节点点击事件
toggle-expand - 监听节点展开/折叠事件
expand-all - 展开所有节点
collapse-all - 折叠所有节点

示例代码

<el-tree
  :data="treeData"
  @node-click="handleNodeClick"
  @toggle-expand="handleExpandChange"
></el-tree>

完整示例：将理论付诸实践

让我们结合数据绑定和显示技巧，创建一个功能齐全的 el-tree 组件。

<template>
  <el-tree
    :data="treeData"
    :props="nodeProps"
    @node-click="handleNodeClick"
    @toggle-expand="handleExpandChange"
  ></el-tree>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const treeData = ref([
      {
        id: 1,
        label: 'Node 1',
        children: [
          {
            id: 2,
            label: 'Node 2',
          },
          {
            id: 3,
            label: 'Node 3',
          },
        ],
      },
      {
        id: 4,
        label: 'Node 4',
        children: [
          {
            id: 5,
            label: 'Node 5',
          },
          {
            id: 6,
            label: 'Node 6',
          },
        ],
      },
    ]);

    const nodeProps = {
      id: 'id',
      label: 'label',
    };

    const handleNodeClick = (data) => {
      console.log('Node clicked:', data);
    };

    const handleExpandChange = (data, expanded) => {
      console.log('Node expanded/collapsed:', data, expanded);
    };

    return {
      treeData,
      nodeProps,
      handleNodeClick,
      handleExpandChange,
    };
  },
};
</script>