在 Ant-design 表格列中添加按钮答案

【问题标题】：Adding button inside Ant-design table column在 Ant-design 表格列中添加按钮
【发布时间】：2020-09-29 11:51:47
【问题描述】：

我想在表格列中创建一个按钮。我尝试过使用 Cell，但它不起作用。

Cell: ({ cell }) => (
    <button value={cell.row.values.name} onClick={props.handleClickGroup}>
      {cell.row.values.name}
    </button>
  )

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您可以使用render 属性在列内呈现按钮：

const columns = [
  {
    title: 'Button Test',
    key: 'key',
    dataIndex: 'key',
    render: (text, record) => (
     <button onClick={()=> console.log(record)}>
       {"Button Text"}
     </button>
    ),
  },

];

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 35,
    address: 'New York No. 1 Lake Park'
  },
];

<Table
  columns={columns}
  dataSource={data}
/>

【讨论】：

【解决方案2】：

如果是 Vue 的 ant-design，你可以试试这个：

模板

<template>
  <a-table :columns="columns" :data-source="data">
    <a-button slot="action">{ buttonText }</a-button>
  </a-table>
</template>

脚本

<script>
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
    { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
  ]

  const data = [
    {
      key: 1,
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
    },
    {
      key: 2,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },
  ]

  export default{
    data(){
      return{
        data,
        columns,
        buttonText: "view"
      }
    }
  }
</script>

您可以在他们的网站https://antdv.com/components/table/ Expandable Row

下找到更多信息

【讨论】：