【原创】antdesign表格组件column的API里render方法详解

原创已于 2023-04-23 11:54:00 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-04-11 10:12:05 首次发布

前端开发专栏收录该内容

14 篇文章

订阅专栏

在开发项目中遇到一个问题，后台接口返回的是数字状态，前端需要显示为中文。通过研究Antdesign的table组件，发现column的render方法可以解决这个问题。通过创建一个映射对象，将数字与对应的中文状态关联，然后在render函数中根据接收到的数字返回相应的中文描述，成功实现了数据的转换并展示在表格中。

这两天做项目，有一个后台的接口，返回的数据为数字，但是前台要展示它的中文值

第一次接触antdesign，对于table组件还不是很了解，那就啃官方文档吧

在column里有个render方法，那就用它试试

如下图，原始代码及前台展示

  {
    title: "状态",
    dataIndex: "meetingStatus",   
  },

修改后的代码及展示

{
    title: "状态",
    dataIndex: "meetingStatus",
    key: "meetingStatus",
    render(meetingStatus){
      let config={
        '1':'预约中',
        '2':'未开始',
        '3':'进行中',
        '4':'已结束',
        '5':'预约失败',
      }
      return config[meetingStatus];
    }    
  },