<cn> #### 树形数据展示 表格支持树形数据的展示,可以通过设置 `indentSize` 以控制每一层的缩进宽度。 > 注:暂不支持父子数据递归关联选择。 </cn> <us> #### Tree data Display tree structure data in Table, control the indent width by setting `indentSize`. > Note, no support for recursive selection of tree structure data table yet. </us> ```html <template> <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" /> </template> <script> const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', width: '12%', }, { title: 'Address', dataIndex: 'address', width: '30%', key: 'address', }]; const data = [{ key: 1, name: 'John Brown sr.', age: 60, address: 'New York No. 1 Lake Park', children: [{ key: 11, name: 'John Brown', age: 42, address: 'New York No. 2 Lake Park', }, { key: 12, name: 'John Brown jr.', age: 30, address: 'New York No. 3 Lake Park', children: [{ key: 121, name: 'Jimmy Brown', age: 16, address: 'New York No. 3 Lake Park', }], }, { key: 13, name: 'Jim Green sr.', age: 72, address: 'London No. 1 Lake Park', children: [{ key: 131, name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park', children: [{ key: 1311, name: 'Jim Green jr.', age: 25, address: 'London No. 3 Lake Park', }, { key: 1312, name: 'Jimmy Green sr.', age: 18, address: 'London No. 4 Lake Park', }], }], }], }, { key: 2, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }]; const rowSelection = { onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); }, onSelectAll: (selected, selectedRows, changeRows) => { console.log(selected, selectedRows, changeRows); }, }; export default { data() { return { data, columns, rowSelection, } } } </script> ```