一、defaultExpandAll
默认展开所有树节点
1、需求:默认展开所有树节点
2、问题:
v-if="data.length"判断的层级不够,只判断到了物理那一层,所以只展开到那一层。
3、原因分析:
默认展开所有树节点, 如果是异步数据,需要在数据返回后再实例化,建议用 v-if="data.length";当有 expandedKeys 时,defaultExpandAll 将失效。
4、解决办法:
判断:到最里面的那一层数据都有了之后再渲染。
二、点击文字可以“选中/取消选中”节点
1、需求:点击文字选中/取消选中节点
2、解决办法:
<a-treecheckablev-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();
};