ant-design-pro的ProTable中column中设置valueEnum属性

如果是给定得默认值,使用如下:

  {
      title: '是否过期',
      dataIndex: 'overdue',
      key: 'overdue',
      valueEnum: {
      0: {text: '未过期',},
      1: {text: '已过期',},
      },
  }

或者先定义

	const enumList = {
		0: { text: '未过期' },
		1: { text: '已过期' },
	};
------------------------然后使用----------------------------
 		{
            title: '是否过期',
            dataIndex: 'overdue',
            key: 'overdue',
            valueEnum: enumList
        }

但是如果valueEnum的值是通过接口获取的,比如说,你想用数据库里的用户id作为key,userName作为text:值,因为数据是会动态变化的,无法用枚举直接自定义,下面给出一种解决方法:

   const [datas, setDatas] = useState({})
   useEffect(() => {
   //调用接口
     listOverdue().then((res) => {
     //如果响应成功
       if(res.bizCode===200){
         let data = {};
         //将拿到的返回值遍历
         res.data.map(item=>{
    //使用接口返回值的id做为 代替原本的0,1
           data[item.id]={
   //使用接口返回值中的overdueValue属性作为原本的text:后面的值
             text: item.overdueValue,
           }
         })
         setDatas(data)  
       }          
    })
 }, []);
 ----------------然后使用-----------------------------
 	{
      title: '是否过期',
      dataIndex: 'overdue',
      key: 'overdue',
      valueEnum: datas
     }

这样就可以使用了啊

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值