vue + antd 1.7.8 的树形table 新增子节点的时候需要默认展开

Vue + Ant Design (antd) 1.7.8 中，要在树形表格组件（Table with Tree Expandable Rows）新增子节点并使其默认展开，你需要做以下几个步骤： 1. 首先，确保你已经安装了所需的依赖，包括 Vue、Ant Design 和相关的插件。如果你还没有安装，可以使用 npm 或者 yarn 进行安装： ``` npm install vue antd @ant-design/icons // 如果还需要图标库 ``` 2. 在你的 Vue 组件中，引入需要的组件和样式： ```html <script setup> import { Table, Button, Input } from 'ant-design-vue'; import { TreeNode } from '@ant-design/icons-vue'; </script> <style scoped> /* 添加样式以控制默认展开 */ .default-expanded { & > .ant-tree-node__expanded-icon { transform: rotate(90deg); } } </style> ``` 3. 初始化数据结构时，为新添加的子节点设置 `expanded` 属性为 true，例如： ```js const data = [ { title: '父节点', children: [ { title: '子节点1', expanded: true, // 默认展开 }, { title: '子节点2' } ] } ]; ``` 4. 使用 `Tree` 组件展示数据，并监听节点添加事件，如 `onNodeAdd`： ```html <template> <div> <a-button type="primary" @click="addNewChild">新增子节点</a-button> <Table :data="data" :columns="columns" :treeConfig="{ defaultExpandedKeys: ['0-0'] }"> <!-- ...省略其他配置 --> <span slot-scope="props"> <!-- ...省略其他列，只看展开图标部分 --> <TreeNode :node="props.node" /> <template #title>{{ props.row.title }}</template> <template #expandIcon> <i :class="props.expanded ? 'default-expanded' : ''"></i> </template> </span> </Table> </div> </template> <!-- ...省略其余的setup部分 --> ``` 5. 定义 `addNewChild` 函数，在这里添加新的子节点并更新状态： ```js const addNewChild = () => { // 根据当前选中的父节点索引来添加子节点 const newNode = { title: '新子节点', expanded: true, }; const parentNodeKey = this.$refs.tree.getNodeByKey('0').key; // 假设已知父节点 key this.data[parentNodeKey].children.push(newNode); }; ``` 现在，每次点击 "新增子节点" 按钮，都会在选定的父节点下新增一个默认展开的子节点。