antd+vue的table使用

本篇一共解决四个问题：

固定列
数据里是对象形式
数字或者布尔值转换为文字显示在表格里
时间格式化
添加操作栏
文字居中

代码如下：

<a-table 
  rowKey="id" 
  :columns="columns" 
  :data-source="dataTable" 
  :scroll="{ x: 900 }" 
  bordered
>
  <span slot="type" slot-scope="type"> {{ type === 0 ? '是' : '否' }} </span>
  <span slot="time" slot-scope="time"> {{ time | formatTime(time) }} </span>
  <a slot="action" 
    slot-scope="text, record" 
    href="javascript:;" 
    @click="handleOk(record.id)"
    >删除
  </a>
</a-table>

import moment from 'moment'
export default {
  data () {
    return {
      direction: 'horizontal',
      current: 2,
      steps: [
        {
          id: 'sdf',
          name: 'login',
          type: 0,
          info: [{ userName: 'amily', userId: '001', comment: 'aaaaaaaaaaaaa' }]
        },
        {
          id: 'fgh',
          name: 'rabbit',
          type: 1,
          info: [{ userName: 'bill', userId: '002', comment: 'aaaaadsaew' }]
        },
        {
          id: 'wrg',
          name: 'tiger',
          type: 2,
          info: [{ userName: 'cherry', userId: '003', comment: 'fdrewdaaaaa' }]
        },
        {
          id: 'jhm',
          type: 3,
          info: [{ userName: 'dolly', userId: '004', comment: 'fhghyfaaaa' }]
        }
      ],
      columns: [
        { title: 'appId', dataIndex: 'app.appId', align: 'center', scopedSlots: { customRender: 'app.appId' } },
        { title: 'appName', dataIndex: 'app.appName', align: 'center', scopedSlots: { customRender: 'app.appName' } },
        { title: 'appNum', dataIndex: 'app.appNum', align: 'center', scopedSlots: { customRender: 'app.appNum' } },
        { title: '类型', dataIndex: 'type', align: 'center', scopedSlots: { customRender: 'type' } },
        { title: '时间', dataIndex: 'time', align: 'center', scopedSlots: { customRender: 'time' } },
        { width: 100, title: '操作', dataIndex: 'action', align: 'center', fixed: 'right', scopedSlots: { customRender: 'action' } }
      ],
      dataTable: [
        {
          id: 'as',
          type: 0,
          time: 1606838400000,
          app: { appName: 'Amy', appNum: '001', appId: 'idaaa' }
        },
        {
          id: 'bs',
          type: 1,
          time: 1607011199000,
          app: { appName: 'Bill', appNum: '090', appId: 'idasw' }
        },
        {
          id: 'cs',
          type: 0,
          time: 1598878386000,
          app: { appName: 'Claire', appNum: '361', appId: 'idsdw' }
        }
      ]
    }
  },
  filters: {
    formatTime (time) {
      return moment(time).format('YYYY-MM-DD')
    }
  }
}

页面效果：

在这里插入图片描述

1.数据里是对象形式

比如本例中的dataTable里的app，返回的数据是对象格式
app: { appName: 'Amy', appNum: '001', appId: 'idaaa' }
需要在表格里分别显示成三列，则：
在columns里，dataIndex以及scopedSlots直接点出来，就能显示。
这个比较简单。

2. 固定列

在`columns`里找到需要固定的那一列数据，添加`fixed: 'right`'或者`'left'`即可，注意，如果是固定在最右边，则它需要在最右边的一列，不能有比它更靠右的一列。
固定列一般伴随着是水平滚动条，`:scroll="{ x: 900 }"`，数值根据自己实际情况调整
注：固定栏需要设置宽度

3. 数字或者布尔值转换为文字显示在表格里

dataTable里type返回来的值为0或1，当为0时，页面上需要显示“是”，当为1时，页面上需要显示”否“，操作方法：

<span slot="type" slot-scope="type"> {{ type === 0 ? '是' : '否' }} </span>

4. 时间格式化

返回的时间为13位，需要格式化为需要的格式

页面上需要<span slot="time" slot-scope="time"> {{ time | formatTime(time) }} </span>

用到格式化工具，moment, 先引入：import moment from 'moment'

然后添加filiters

filters: {
  formatTime (time) {
    return moment(time).format('YYYY-MM-DD')
  }
}

5. 添加操作栏

在columns有这样一栏：

 { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }

页面上：

<a slot="action" slot-scope="text, record" href="javascript:;" @click="handleOk(record.id)">删除</a>

其中record表示这一列的数据，record.id能拿到id

6. 文字居中

在columns里每一组数据里添加这个属性即可：align: 'center'