Question

是否可以通过切换ant design表中的开关来获取行信息？

Answer 1

是的，render函数的第二个参数是记录。你可以做到

{
  title: 'switch',
  dataIndex: 'age',
  key: 'age',
    render: (e, record) => (< Switch onChange={() => handleSwitchChange(record)} defaultChecked={e} />)
}

Answer 2

这是我在使用 Ant 设计时处理每个行项目上的开关组件的方式。也许这可以给你一些提示。

表格列

const COLUMN =
     {
          title: 'Status',
          key: 'status',
          dataIndex: 'status',
          // status is the data from api 
          // index is the table index which could be used to get corresponding data
          render: (status, record, index) => {
            const onToggle = (checked) => {
              status = checked;
              onActiveUser(index, status);
            };
            return (
              <Space>
                <Switch defaultChecked={status} onChange={onToggle} />
              </Space>
            );
          },
        },

   const onActiveUser = (index, status) => {
        axios.patch({ id: users[index].id }, { is_active: status })
          .then((response) => {
            console.log(response);
          })
          .catch(() => {
            console.log('Failed!');
          });
      };

带有开关组件的antd表

2 个答案: