Ant-Design-vue的a-table入门

本来想写个详解的，一翻API，算了吧ε=(´ο｀*)))，写个入门教程吧。

简单使用

<a-table
  :columns="columns"
  :data-source="data"
></a-table>

data(){
  return{
    columns: [...],  //标题行数据
    data: []  //一般为空，通过axios请求更新
  }
}

这样写，a-table就能简单地把数据原样渲染上去，这里有两个参数介绍一下：

• columns: 表头标题

columns: [
  { 
    title: 'Name',  //标题名字
    dataIndex: 'name',  //将渲染data-source里，name字段对应的数据 
    sorter: true,  //可选 本地排序使用函数，使用服务端排序设置为true
    width: '20%'  //可选 该列宽度，不设置默认为自适应
  },
  ...
]

• data: 渲染数据源
  就是要渲染的数据，数组内，一个对象对应一行数据

data: [
  { name: '安博', id: '12', nickname: '小安', ... },
  {...}
]

其他常用参数

• bordered: 是否显示边框 boolean
• loading: 加载中，是否显示加载动画 boolean | object
• title: 表格标题
• row-key: 每行的key值，用作区分每行的，如果数据源有id字段，可：

  :row-key='record => record.id'  //后面会讲，record就是数据源里对应的该行的数据，是一个对象

• pagination: 分页的设置 object

<a-table :pagination='pagination'></a-table>

data(){
  return{
    pagination: {
       disabled: false,  //禁用分页
       hideOnSinglePage: true, //只有一页时是否隐藏分页器
       pageSize: 10, //每页条数，所有页设置统一的条数
       pageSizeOptions: ['10', '20', '30'], //每页显示的条数，每页设置不同的条数
       total: 100, //数据总数
    }
  }
}

自定义列

有时候只是把数据渲染上去还不能满足要求，比如要显示性别，后端传过来的数据格式是：sex: true, true代表男，false代表女，总不能把true，false渲染上去吧。
这时候就要自定义了，a-table的自定义使用了插槽的概念：

columns: [
  { title: '名称', dataIndex: 'name', key: 'name' },
  { 
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    scopedSlots: { customRender: 'sex' }    //开启插槽，插槽名为`sex`
  },
  ...
];

<a-table
:columns='columns'
:data-source='data'>
//正常使用插槽就好了，看不懂的补补插槽，text: 要渲染的数据| record：该行的所有数据 | index 该行的序号
  <template #sex='text, record, index'>  
    {{ text?'男':'女' }}
  </template>
</a-table>