之前已经实现了可编辑和可拖拽的table了：
【已解决】AntD Pro中支持剧本剧本编写时拖动排序单个对话
现在需要去加一列，点击后可以删除，且希望是这种图标的按钮：
而不是（官网demo中
）普通的可点击的delete文字
【总结】
最后用代码：
export default class ScriptCreate extends PureComponent {
constructor(props) {
super(props)
...
this.handleDeleteItem = this.handleDeleteItem.bind(this)
}
handleDeleteItem(index) {
console.log("handleDeleteItem: index=", index)
let afterDeleteList = this.state.dialogList
console.log("this.state.dialogList=", this.state.dialogList)
if (index < afterDeleteList.length) {
afterDeleteList.splice(index, 1)
console.log("afterDeleteList=", afterDeleteList)
console.log("this.state.dialogList=", this.state.dialogList)
this.setState({ dialogList: afterDeleteList })
this.forceUpdate()
}
}
columns = [
{
title: '序号',
width: "8%",
editable: false,
dataIndex: 'number',
key: 'number',
// rowKey: 'number',
// fixed: 'left',
render(text, record, index) {
return index + 1;
},
},
{
width: "15%",
editable: true,
title: 'Speaker/Song',
dataIndex: 'speakerOrSong',
key: 'speakerOrSong',
},
{
width: "65%",
editable: true,
title: 'Content/Name',
dataIndex: 'contentOrName',
key: 'contentOrName',
},
{
width: "10%",
editable: false,
title: 'Action',
dataIndex: '',
key: 'action',
render: (text, record, index) => {
console.log(`Action: [${index}] `, ", text=", text, " record=", record)
// return <a href="javascript:;">Delete</a>
return (
<Popconfirm title="是否删除此对话？" onConfirm={() => this.handleDeleteItem(index)} >
{/* <a>删除</a> */}
<Button shape="circle" icon="close" />
</Popconfirm>
)
}
},
]
<DragableEditableTable
tableMode={this.state.tableMode}
columns={this.columns}
itemList={this.state.dialogList}
onTableDataChange={this.syncDialogList}
onTableModeChange={this.onTableModeChange}
form={this.props.form}
/>
实现了要的效果：
注：
其中是参考：
中的Column的render:
“render
生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并
Function(text, record, index) {}”
去加上delete的handle的。
不过有点奇怪 是：
此处：
render: (text, record, index) => {
console.log(`Action: [${index}] `, ", text=", text, " record=", record)输出的是
即：text和record都是一样的，都是record的对象数据，而不是什么文本
也去试了试：
render: (text, record) => {
结果一样：还是输出了text和record一样的对象数据
对此，暂时不是完全清楚，有空再说。
转载请注明：在路上 » 【已解决】给Antd Pro的表格中添加一列删除图标按钮