首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用Ant Design表添加空白的可编辑行?

Ant Design是一套基于React的UI组件库,提供了丰富的组件和样式,方便开发人员快速构建美观、易用的前端界面。在Ant Design中,要添加空白的可编辑行,可以通过以下步骤实现:

  1. 导入所需的Ant Design组件:
代码语言:txt
复制
import { Table, Button } from 'antd';
  1. 定义表格的列配置和数据源:
代码语言:txt
复制
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    render: (_, record) =>
      dataSource.length >= 1 ? (
        <Button onClick={() => handleDelete(record.key)}>删除</Button>
      ) : null,
  },
];

const dataSource = [
  {
    key: '0',
    name: '张三',
    age: 18,
  },
  {
    key: '1',
    name: '李四',
    age: 20,
  },
];
  1. 定义一个状态变量用于存储表格数据:
代码语言:txt
复制
const [data, setData] = useState(dataSource);
  1. 定义一个函数用于添加空白的可编辑行:
代码语言:txt
复制
const handleAdd = () => {
  const newData = {
    key: data.length.toString(),
    name: '',
    age: '',
  };
  setData([...data, newData]);
};
  1. 渲染表格组件,并在底部添加一个按钮用于触发添加空白行的操作:
代码语言:txt
复制
<Table
  dataSource={data}
  columns={columns}
  pagination={false}
/>

<Button onClick={handleAdd}>添加行</Button>

通过以上步骤,就可以在Ant Design的表格中添加空白的可编辑行了。用户点击"添加行"按钮时,会在表格的数据源中添加一条空白数据,从而实现添加空白行的效果。

Ant Design相关链接:

  • Ant Design官网:https://ant.design/
  • Ant Design Table组件文档:https://ant.design/components/table-cn/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券