ant-design-vue 中 table 自定义格式渲染

一般业务开发中，难免会遇到将一些状态值（如 0 / 1）转化为相应的描述（如 关闭 / 开启），也可能是对日期时间的格式化，如下两图转化前后对比：

---

开始之前，需要注意的是，定义的 columns 一定要写在 data 中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别。

有两种方式修改：

1、直接调用对应插槽模板

<template>
  <div class="vehicle-list">
    <a-table :columns="columns" :data-source="data" bordered>
      <template slot="tradeState" slot-scope="state">
        {
    { state === 1 ? '交易完成' : (state === 0 ? '等待交易' : '交易失败') }}
      template>
      <template slot="tradeTime" slot-scope="time">
        {
    { timeFormat(time) }}
      template>
    a-table>
  div>
template>

<script>
import moment from 'moment'

const columns = [
  {
      
    title: '交易状态',
    dataIndex: 'tradeState',
    // customRender: 'tradeState' -> 自定义 slot 属性名，对应模版中的 slot 属性，即这里自定义为啥，对应模版中的 slot 就要等于啥
    // 模板中对应的 slot-scope 属性可以用来传递三个参数（val,row,index），分别是当前值、当前行数据和当前索引
    scopedSlots: {
       customRender: 'tradeState' }
  },
  {
      
    title: '交易时间',
    dataIndex: 'tradeTime',
    scopedSlots: {
       customRender: 'tradeTime' }
  }
]

const data = [
  {
      
    key: '1',
    tradeState: 1,
    tradeTime: '2020-11-01T12:50:19+08:00'
  },
  {
      
    key: '2',
    tradeState: -1,
    tradeTime: '2020-11-02T18:06:32+08:00'
  },
  {
      
    key: '3',
    tradeState: 0,
    tradeTime: '2020-11-03T08:25:03+08:00'
  }
]

export default {
      
  name: 'VehicleList',
  data () {
      
    return {
      
      data,
      columns
    }
  },
  methods: {
      
    timeFormat (val) {
       // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
script>

2、指定渲染函数

<template>
  <div class="vehicle-list" style="width: 50%">
    <a-table :columns="columns" :data-source="data" bordered>a-table>
  div>
template>

<script>
import moment from 'moment'

const columns = [
  {
      
    title: '交易状态',
    dataIndex: 'tradeState',
    customRender: (state) => {
       // customRender属性是一个方法，可接收三个参数（val,row,index），分别是当前值、当前行数据和当前索引，与方式 1 中模版的 slot-scope 属性传参类似
      return state === 1 ? '交易完成' : (state === 0 ? '等待交易' : '交易失败')
    }
  },
  {
      
    title: '交易时间',
    dataIndex: 'tradeTime',
    customRender: (time) => moment(time).format('YYYY-MM-DD HH:mm:ss')
  }
]

const data = [
  {
      
    key: '1',
    tradeState: 1,
    tradeTime: '2020-11-01T12:50:19+08:00'
  },
  {
      
    key: '2',
    tradeState: -1,
    tradeTime: '2020-11-02T18:06:32+08:00'
  },
  {
      
    key: '3',
    tradeState: 0,
    tradeTime: '2020-11-03T08:25:03+08:00'
  }
]

export default {
      
  name: 'VehicleList',
  data () {
      
    return {
      
      data,
      columns
    }
  }
}
script>

对比以上，可以看出方式2代码更加简洁，且易读性更好。