[JavaScript知识库]antd Table组件的插槽使用

对于table里每一列的数据，根据接口返回，有的时候接口只返回纯数据或者类型，前端还要进行处理。
当然有很多种方法，
1.在拿到数据后直接用map方法，改变原本的数据，data-source修改绑定的数据。
2.使用scopedSlots: { customRender: 'upCapacity' }插槽，在渲染template的时候修改。

const columns = [
  { title: '存储类型', dataIndex: 'storage' },
  {
    title: '容量范围',
    dataIndex: 'upCapacity',
    scopedSlots: { customRender: 'upCapacity' }
  },
  { title: '按量价格', dataIndex: 'hourGFee' ,
  customRender: text => {
      return text+'元/1GIB/小时'
    }
  }
]

		<a-table
        :columns="columns"
        :data-source="tableList"
        :row-key="(record, index) => record.id"
        :pagination="false"
        class="tableFee"
      >
        <template slot="upCapacity" slot-scope="text,record">
          <a>{{record.lowCapacity+'gib'+'-'+record.upCapacity+'gib'}}</a>
        </template>
      </a-table>

3.直接在columns里的时候改。

	const columns = [
  { title: '镜像名称', dataIndex: 'name' },
  { title: '镜像大小', dataIndex: 'capacity' },
  {
    title: '云盘属性',
    dataIndex: 'diskType',
    customRender: text => {
      let result = ''
      switch (text) {
        case 0:
          result = '系统盘'
          break
        case 1:
          result = '数据盘'
          break
      }
      return result
    }
  },
  { title: '创建时间', dataIndex: 'createTime' },
  {
    title: '状态',
    dataIndex: 'status',
    customRender: text => {
      let result = ''
      switch (text) {
        case 0:
          result = '处理中'
          break
        case 1:
          result = '正常'
          break
        case 2:
          result = '异常'
          break
        case 3:
          result = '欠费'
          break
        case 4:
          result = '未付款'
          break
        case 5:
          result = '付款未创建'
          break
        case 6:
          result = '已删除'
          break
      }
      return result
    }
  },
  { title: '架构', dataIndex: 'archType' },
  { title: '站点', dataIndex: 'stationName' },
  {
    title: '操作',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]