Element UI 树形组件的深入探讨：实用场景和代码示例

Element UI 树形组件的巧妙运用

Element UI 树形组件（Tree）以其直观且强大的功能而闻名，它允许开发人员在应用程序中构建美观而实用的树形结构。本文将深入探讨 Tree 组件，揭示其在不同场景中的实际应用，并提供具体的代码示例，帮助您充分利用其潜力。

场景一：将 Tree 组件选中的值拼接成字符串传给后台

假设您有一个后台接口需要接收一个由逗号分隔的字符串，其中包含用户在 Tree 组件中选中的值。为了实现这一点，可以使用以下步骤：

1. 定义一个空字符串变量 selectedValues 来存储选中的值。
2. 监听 Tree 组件的 check-change 事件，当用户选中或取消选中某个节点时触发。
3. 在事件处理函数中，使用 node.data.id 获取当前节点的唯一标识符并将其添加到 selectedValues。
4. 在需要将值发送到后台时，使用 selectedValues 变量来构造逗号分隔的字符串。

代码示例：

<template>
  <el-tree
    :data="treeData"
    :default-expanded-keys="expandedKeys"
    :check-strictly="true"
    @check-change="onCheckChange"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedValues: '',
      expandedKeys: ['1'],
      treeData: [
        { id: '1', label: '节点 1', children: [
          { id: '1-1', label: '子节点 1-1' },
          { id: '1-2', label: '子节点 1-2' },
        ]},
        { id: '2', label: '节点 2' },
      ],
    };
  },
  methods: {
    onCheckChange(data, checked, node) {
      const id = data.id;
      if (checked) {
        this.selectedValues += `${id},`;
      } else {
        this.selectedValues = this.selectedValues.replace(`${id},`, '');
      }
    },
  },
};
</script>

场景二：将后台返回的值对 Tree 组件复显值来选中或者重新编辑再次传给后台

在某些情况下，您可能需要在 Tree 组件中回显后台返回的数据并允许用户进行修改。要做到这一点，可以使用以下步骤：

1. 在 Tree 组件中使用 default-checked-keys 属性，并将其设置为从后台接收的已选中值。
2. 监听 Tree 组件的 node-click 事件，当用户点击某个节点时触发。
3. 在事件处理函数中，获取当前节点的唯一标识符 node.data.id 并将其存储在变量中。
4. 向后台发送请求，将 node.data.id 作为参数，并获取有关该节点的详细信息。
5. 使用从后台收到的详细信息更新 Tree 组件中相应节点的属性，例如 label 或 children。

代码示例：

<template>
  <el-tree
    :data="treeData"
    :default-checked-keys="checkedKeys"
    @node-click="onNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      checkedKeys: [],
    };
  },
  created() {
    // 从后台获取已选中值
    this.getCheckedKeys();
  },
  methods: {
    getCheckedKeys() {
      // 向后台发送请求以获取已选中值
      this.$axios.get('/api/getCheckedKeys').then(res => {
        this.checkedKeys = res.data;
      });
    },
    onNodeClick(node) {
      const id = node.data.id;
      // 向后台发送请求以获取节点详细信息
      this.$axios.get(`/api/getNodeDetails/${id}`).then(res => {
        // 更新节点属性
        node.data.label = res.data.label;
        node.data.children = res.data.children;
      });
    },
  },
};
</script>

结语

Element UI Tree 组件是一个功能强大的工具，可用于创建各种交互式树形结构。通过充分利用其强大的功能和自定义选项，开发人员可以构建直观且高效的用户界面。本文中概述的场景和代码示例只是 Tree 组件众多可能用途中的几个。通过探索其全部潜力，您可以创建强大的应用程序，为用户提供卓越的体验。