Antd嵌套表格：如何在搜索后根据数据动态渲染父行？
1.先定义一个父表格和子表格的列数据 const parentColumns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Description', dataIndex: 'description', key: 'description', }, ];
const childColumns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ];
-
定义一个父表格的数据源，并在state中设置当前的搜索关键字 this.state = { parentData: [ { key: '1', name: 'Parent 1', description: 'This is parent 1', children: [ { key: '11', name: 'Child 1', age: 18, address: 'Some address 1', }, { key: '12', name: 'Child 2', age: 16, address: 'Some address 2', }, ], }, { key: '2', name: 'Parent 2', description: 'This is parent 2', children: [ { key: '21', name: 'Child 1', age: 18, address: 'Some address 1', }, { key: '22', name: 'Child 2', age: 16, address: 'Some address 2', }, ], }, ], searchKey: '', };
-
定义一个方法来获取根据搜索关键字过滤后的父表格数据源 getParentData = () => { const { parentData, searchKey } = this.state; return parentData .map(parent => { // 过滤出符合搜索关键字的子表格数据