antd Protable 常用配置项包括多选、查询条件等复合在protable组件中,部分配置项与table组件通用(如批量操作、复选框勾选后翻页缓存)

 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" }}
      />

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值