Vue Tree 控件：实现树节点双击不取消选中，两种简单方法

2023-05-07 13:14:42

Ant Design Tree：解决双击取消选中的问题

简介
问题
解决方法
- 方法一：使用 selectedKeys 存储选中的树节点
- 方法二：使用 disabled 禁用树节点的取消选中功能
总结
常见问题解答

简介

在开发前端应用时，展示树形结构数据是常见的需求。Vue 中的 Ant Design Tree 控件是一个强大的工具，可以轻松实现树形结构的展示和交互。但是，在使用 Ant Design Tree 时，我们会遇到一个问题：双击树节点会导致树节点取消选中。这可能会破坏某些应用的正常功能。

问题

双击树节点取消选中可能带来以下问题：

根据左侧树节点选择右侧表格数据时，双击树节点会取消选中，导致右侧表格数据无法正确显示。
希望通过双击树节点展开或折叠子节点时，双击树节点会取消选中，无法正常展开或折叠子节点。

解决方法

有两种简单的方法可以解决 Ant Design Tree 中双击取消选中的问题：

方法一：使用 selectedKeys 存储选中的树节点

import { Tree } from 'ant-design-vue';

const App = {
  data() {
    return {
      selectedKeys: [], // 存储选中的树节点
      treeData: [
        {
          title: '父节点 1',
          key: '1',
          children: [
            {
              title: '子节点 1-1',
              key: '1-1',
            },
            {
              title: '子节点 1-2',
              key: '1-2',
            },
          ],
        },
        {
          title: '父节点 2',
          key: '2',
          children: [
            {
              title: '子节点 2-1',
              key: '2-1',
            },
            {
              title: '子节点 2-2',
              key: '2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 当树节点被点击时
    onTreeNodeClick(selectedKeys, e) {
      // 如果双击了树节点，则取消选中该树节点
      if (e.detail === 2) {
        this.selectedKeys = [];
      } else {
        // 如果不是双击树节点，则选中该树节点
        this.selectedKeys = selectedKeys;
      }
    },
  },
  render() {
    return (
      <Tree
        selectedKeys={this.selectedKeys}
        treeData={this.treeData}
        on-node-click={this.onTreeNodeClick}
      />
    );
  },
};

export default App;

使用 selectedKeys 来跟踪选中的树节点。当树节点被点击时，检查是否是双击。如果是双击，则取消选中该树节点。否则，选中该树节点。

方法二：使用 disabled 禁用树节点的取消选中功能

import { Tree } from 'ant-design-vue';

const App = {
  data() {
    return {
      treeData: [
        {
          title: '父节点 1',
          key: '1',
          children: [
            {
              title: '子节点 1-1',
              key: '1-1',
            },
            {
              title: '子节点 1-2',
              key: '1-2',
            },
          ],
        },
        {
          title: '父节点 2',
          key: '2',
          children: [
            {
              title: '子节点 2-1',
              key: '2-1',
            },
            {
              title: '子节点 2-2',
              key: '2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 当树节点被点击时
    onTreeNodeClick(selectedKeys, e) {
      // 禁用树节点的取消选中功能
      e.node.props.disabled = true;
    },
  },
  render() {
    return (
      <Tree
        treeData={this.treeData}
        on-node-click={this.onTreeNodeClick}
      />
    );
  },
};

export default App;