React Ant Design 的表格默认选中

àì夳堔傛蜴生んèń 2022-11-04 01:44 248阅读 0赞

网上的文章基本都是错的，都不能解决Ant design表格默认选中问题，网上大多数搜到的文章都是下面这种：

明明 getCheckboxProps 这个就是默认的多选框的配置，怎么 checked 或者 defaultChecked 就不行呢，而 selectedRowKeys 在这里面又不会使用。  
![在这里插入图片描述][2020090316095188.png_pic_center]

那么 Ant Design 的表格默认选中怎么实现呢？正确的代码如下：

const LinkTable = (props) => {
      const actionRef = useRef();
      const {dispatch} = props;
      const [selectedRowKeys, setSelectedRowKeys] = useState([]);
      const [selectedRowsState, setSelectedRows] = useState([]);
    
      const columns = [
        {
          title: '菜谱ID',
          dataIndex: 'id',
        },
        {
          title: '菜谱名称',
          dataIndex: 'name',
        },
        {
          title: '一级分类',
          dataIndex: 'type_level1s',
        },
        {
          title: '二级分类',
          dataIndex: 'type_level2s',
        },
      ];
      return (
        <PageContainer>
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            search={
       {
              labelWidth: 120,
            }}
            request={(params, sorter, filter) =>
              queryRecipeLink({...params, sorter, filter})
            }
            columns={columns}
            rowSelection={
       {
              type: 'checkbox',
              selectedRowKeys: selectedRowKeys,
              onChange: (selectedRowKeys, selectedRows) => {
                setSelectedRowKeys(selectedRowKeys)
                console.log(`selectedRowKeys1: ${selectedRowKeys}`, 'selectedRows1: ', selectedRows);
              },
            }}
          />
          {selectedRowsState?.length > 0 && (
            <FooterToolbar
              extra={
                <div>
                  已选择{' '}
                  <a
                    style={
       {
                      fontWeight: 600,
                    }}
                  >
                    {selectedRowsState.length}
                  </a>{' '}
                  项  
                </div>
              }
            >
              <Button type="primary">
                <Popconfirm
                  title={`确定关联列表选中的${selectedRowsState.length}个菜谱吗？`}
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => {
                    handleRelative(selectedRowsState).then(() => {
                      setSelectedRows([]);
                      actionRef.current?.reloadAndRest();
                    });
                  }}
                >
                  <a>批量关联</a>
                </Popconfirm>
              </Button>
            </FooterToolbar>
          )}
        </PageContainer>
      );
    };
    
    export default connect(({}) => ({}))(LinkTable);

主要关注 ProTable 标签下 rowSelection 属性就可以了，selectedRowKeys 存放我们需要选中的行的 id，图示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70][]

到此我们就完成了 React Ant Design 的表格初始默认选中了。

[2020090316095188.png_pic_center]: /images/20221023/3d39444bd8724b1395b7f6345510ca44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70]: /images/20221023/823c4df353e74632a7ad662f2c2a3df1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ant design React 修改表格的表头标题样式！！

亲测有效，就算有自定义主题色也可以生效，不会被覆盖自定义title : import ColumnShow from './component/columnS

港控/mmm°/ 2023年01月11日 09:15/ 0 赞/ 366 阅读

相关 react 中ant design的使用

1.antd官网 https://ant.design/docs/react/introduce-cn 2、React中全局样式使用Antd 1)、安装ant

「爱情、让人受尽委屈。」/ 2023年01月02日 06:25/ 0 赞/ 248 阅读

相关 ant design vue表格table 默认勾选特定几项

关于网上这个答案真的无法言说，仿佛都出资同一人手笔，废话不多说，上代码： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

本是古典何须时尚/ 2022年12月26日 04:44/ 0 赞/ 508 阅读

相关 ant-design Table表格添加合计行

文章目录 1：方式一：（比较好维护：推荐） 1：效果图 2：排序数字 3：table 4：data定义

小灰灰/ 2022年11月06日 14:50/ 0 赞/ 1486 阅读

相关 React Ant Design 的表格默认选中

网上的文章基本都是错的，都不能解决Ant design表格默认选中问题，网上大多数搜到的文章都是下面这种：明明 getCheckboxProps 这个就是默认的多选框的配置

àì夳堔傛蜴生んèń/ 2022年11月04日 01:44/ 0 赞/ 249 阅读

相关 Ant Design Vue数据表格序号

参考：[https://blog.csdn.net/qq\_38344500/article/details/105995886][https_blog.csdn.net_qq

傷城~/ 2022年09月10日 01:15/ 0 赞/ 454 阅读

相关 React--ant design

Reactjs入门参考路径：[http://www.cnblogs.com/Leo\_wl/p/4489197.html][http_www.cnblogs.com_Leo_w

分手后的思念是犯贱/ 2022年07月13日 05:41/ 0 赞/ 227 阅读

相关 Ant Design Table 更改默认样式，表格全局居中样式解决方法

.standardTable \{ :global \{ .ant-table-thead > tr > th > \{ text-align: center

忘是亡心i/ 2022年05月20日 10:28/ 0 赞/ 1003 阅读

相关 React Ant Design UI 表格时间列格式化代码片段

//导入moment import component from 'moment' {

￡神魔★判官ぃ/ 2022年05月19日 03:08/ 0 赞/ 175 阅读

相关 HTML引用React 和 Ant Design

HTML引用React 和 Ant Design分三步走：第一步：引用React 第二步：引用antd和相关依赖库第三步：使用antd组件,antd.componen

深碍√TFBOYSˉ_/ 2022年05月10日 07:52/ 0 赞/ 309 阅读