vue 里的 ant design表格数据的字段转换处理，如日期、布尔类型、三元表达式判断等

荣默默

已于 2022-02-11 14:14:04 修改

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端

于 2022-02-11 09:45:07 首次发布

本文链接：https://blog.csdn.net/rt2016/article/details/122873947

版权

在Vue与Ant Design结合使用时，处理接口返回的列表数据常常遇到挑战，如时间戳转日期、布尔值转文字描述。解决方法是在表格的columns中利用customRender函数进行转换。但需要注意，customRender内无法直接访问组件的data属性。

摘要由CSDN通过智能技术生成

最近在使用vue ant design 的时候，在处理接口返回的列表数据的时候老是出现各种问题，比如接口里返回的是时间戳，怎么在表格里展示成日期格式；还有接口返回的是bool类型，怎么展示成对应的文字描述等，话不多说，直接上代码。

const columnsList = [
  [
    {
      title: "名称",
      align: "center",
      width: "200px",
      dataIndex: "name",
      scopedSlots: { customRender: "name" },
    },
    {
      title: "是否长期",
      dataIndex: "effectiveType",
      align: "center",
      scopedSlots: { customRender: "effectiveType" },
      customRender: (text, row, index) => {
        return text?"是": "否"
         
      }
    },
    {
      title: "有效开始时间",
      align: "center",
      dataIndex: "effectiveBegin",
      scopedSlots: { customRender: "effectiveBegin" },
      customRender: (text, row, index) => {
          return moment(text).format("YYYY-MM-DD HH