我们可以自定义扩展行,将展开图标放在第一列并使其与其他行匹配。 我们需要在columns属性中加入一个render函数,使用onClick方法来控制展开和折叠。示例代码如下:
columns = [{
title: "Name",
dataIndex: "name"
},{
title: "Age",
dataIndex: "age"
},{
title: "",
dataIndex: "",
width: 50,
render: (text, record) => {
if (record.children) {
return (
this.handleExpand(record)}>
{record.expanded ? : }
)
} else {
return null
}
}
}]
handleExpand = (record) => {
// 更新扩展状态
record.expanded = !record.expanded
// 强制渲染
this.forceUpdate()
}
其中,handleExpand函数用于更新数据源中的expanded属性和强制更新组件,以更新展开状态。