博客

1、自定义table选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom

2、翻页缓存选中项 preserveSelectedRowKeys: true

      <ProTable<taskTableItem, taskTableParams>
        // 开启checkbox 进行批量操作
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          selectedRowKeys, // 选中的行
          onChange: onSelectChange, // 选中的回调
          // 翻页缓存选中项
          preserveSelectedRowKeys: true,
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT], // 注释该行则默认不显示下拉选项
          // defaultSelectedRowKeys: [1],
        }}
        // 表格头部alert
        tableAlertRender={false}
        // 行键 这里设置什么 rowSelection获取的就是对应的值 比如：rowKey="id", 输出的[1, 2, 3, 4]
        rowKey="id"
        cardProps={false}
        actionRef={actionRef}
        formRef={formRef}
        columnEmptyText="--"
        pagination={{
          ...pagination,
        }}
        request={(params) => getList(Object.assign(params, getListParams))}
        bordered
        toolbar={{
          actions: [<div >
            <Popover overlayStyle={{ width: '200px' }} overlayClassName={styles.columnSetting} placement="bottomRight" trigger='click' visible={popFlag} content={returnContent}>
              <Button className={styles.SettingBtn} size='small' title="" onClick={() => columnSetting()}>排序操作{<SwapOutlined />}</Button>
            </Popover>
          </div>],
          settings: [],
          menu: {
            items: [
              {
                key: 1,
                label: (
                  <div className={styles['count-container']} >
                    <span>
                      总任务数：<span>{totalCount.sum || 0}</span>
                    </span>
                    <span>
                      已维护：<span>{totalCount.yesSum || 0}</span>
                    </span>
                    <span>
                      未维护：<span className={styles.warning}>{totalCount.noSum || 0}</span>
                    </span>
                  </div>
                ),
              },
            ],
          },
        }}
        onSubmit={(params) => { handOnSubmit(params) }}
        tableExtraRender={() => (
          <>
            <PermissionBtn customButton={true} type='add' sendButtonTitle={getValueFromSon}>
             <div onClick={() => skipTopage("add")} style={{marginLeft:'25px'}}>
                <Icon type="icon-button-xinzeng-moren" style={backButtonIcon} />
                <span style={backButtonText}>{buttonTitle}</span>
             </div>
            </PermissionBtn >
          </>
          )
        }
        search={{
          searchText: '查询',
          resetText: '清空',
          span: {
            xs: 24,
            sm: 24,
            md: 12,
            lg: 5,
            xl: 5,
            xxl: 5,
          },
          labelWidth: 0,
          collapsed,
          onCollapse: setCollapsed,
          defaultCollapsed: false,
        }}
        dataSource={list}
        columns={columns}
        loading={tableDataLoading}
        scroll={{ scrollToFirstRowOnChange: true, y: tableScrollY, x: "1500px" }}
      />