【antd + vue】Tree 树形控件：默认展开所有树节点 、点击文字可以“选中/取消选中”节点

一、defaultExpandAll 默认展开所有树节点

1、需求：默认展开所有树节点

2、问题：

v-if="data.length"判断的层级不够，只判断到了物理那一层，所以只展开到那一层。

3、原因分析：

默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效。

4、解决办法：

判断：到最里面的那一层数据都有了之后再渲染。

二、点击文字可以"选中/取消选中"节点

1、需求：点击文字选中/取消选中节点

2、解决办法：

<a-tree
    checkable
    v-model="checkedKeys":tree-data="treeData"
    @select="treeNodeSelect">
</a-tree>

/**
* @description: 点击文字也能选中
* @return {*}
*/
const treeNodeSelect= (selectedKeys, e) => {
    // 转成真正的数组
    const toArray = (list) => Array.from(list || []);
    // 获取被点击的树节点
    const node = e.nativeEvent.path.find((item) => {
      return toArray(item.classList).findIndex(className => className === "ant-tree-treenode-switcher-open") !== -1;
    });
    // 获取checkbox复选框
    const checkbox = toArray(node.childNodes).find((item) => {
      return toArray(item.classList).findIndex(className => className === "ant-tree-checkbox") !== -1;
    })
    // 模拟点击
    checkbox && checkbox.click();
};

3、参考链接：

ant-design-vue tree组件选中节点也可以勾选上checkbox