ProTable组件常用配置如:自定义表单标题、自定义状态颜色值、设置下拉选项的数据源为数组对象格式等

1.  下拉框枚举值,预设的status不满足,如何自定义颜色状态值?

答:使用color字段替代status即可。

{
  disable: true,
  title: '状态',
  dataIndex: 'state',
  filters: true,
  onFilter: true,
  ellipsis: true,
  valueType: 'select',
  valueEnum: {
    all: { text: '超长'.repeat(50) },
    open: {
      text: '未解决',
      status: 'Error', // 可使用内置颜色关键字如:Error,若想自定义颜色值,使用color字段
    },
    closed: {
      text: '已解决',
      status: 'Success',
      disabled: true,
    },
    processing: {
      text: '解决中',
      status: 'Processing',
    },
    custom: {
       text: '自定义处理',
       color: '#132033'
    }
  },
},

2.  如何自定义某个column在搜索表单栏中显示的标题名称&设置下拉框数据源不是

答:使用column配置中的formItemProps属性配置即可。

{
  title: '模板名称', // table表格中显示的列名
  formItemProps: {
    label: '短信模板' // 搜索表单显示的标题名
  }
}
3. 如何自定义某个下拉框数据源不是valueEnum而是自定义数组对象格式?

答:使用column配置中的fieldProps属性配置即可。(注意:使用该方式时,table数据源将不能自动将后台返回的枚举值隐射为中文, 即像valueEnum那样)

const list = [{ label: '文本', value: '1'}, { label: '文本2', value: '2' }]

{
  title:'来源平台',
  valueType: 'select',
  fieldProps: {
     options: list, // 下拉数据源:使用数组对象格式
     allowClear: false, // 控件是否显示清空图标
  }
}

4. Protable设置可单选后,点击搜索按钮,如何重新加载数据、当前页码重置为1,但是不要清空重置之前勾选的数据?

答:setPageInfo。注意:若列表当前页非1时,手动setPageInfo为1,列表会自动重新请求页码为1的数据,但是若当前列表页为1时,手动设置页码为1,列表不会自动请求数据

const searchList = () => {
 // FIX 使用reloadAndRest方法会将之前勾选的数据也给清空。需特殊处理,手动将当前页置为1可解决。
 actionRef.current?.reload?.();
 actionRef.current?.setPageInfo?.({
     current: 1,
  });
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值