最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】给Antd Pro的表格中添加一列删除图标按钮

按钮 crifan 555浏览 0评论
之前已经实现了可编辑和可拖拽的table了:
【已解决】AntD Pro中支持剧本剧本编写时拖动排序单个对话
现在需要去加一列,点击后可以删除,且希望是这种图标的按钮:
而不是(官网demo中
https://ant.design/components/table-cn/#components-table-demo-row-selection-and-operation
)普通的可点击的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}
            />
实现了要的效果:
注:
其中是参考:
表格 Table – Ant Design
中的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的表格中添加一列删除图标按钮

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.094 seconds, using 20.74MB memory