antd Vue3 Table 树选择回显异常

huaiyanchen

于 2025-01-24 14:46:31 发布

阅读量151

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_38552198/article/details/145341084

版权

DOM部份， childrenColumnName="oldMaterials"为子节点绑定数据，默认children,树选择注意绑定key值，此值需唯一

<a-table :columns="dcolumns" :dataSource="formModel.materials" :pagination="false" size="middle"  childrenColumnName="oldMaterials"
            :rowKey="(record) => record.id" :scroll="{ x: 50, y: `calc(55vh)` }"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
         
            </template>
          </a-table>

按需声明所需数据

 let selectedRow = ref([]);
 let selectedRowKeys = ref([]);

设置change事件，注意change事件第一个参数为选择key值数组，第二个为选择行数据

const onSelectChange = (selectedKeys, selectedRows) => {
      console.log(selectedRows, "selectedRows0");
      selectedRowKeys.value = selectedKeys
      selectedRow.value = selectedRows
    };

清空选择