本來想寫個詳解的，一翻API，算了吧ε=(′ο｀*)))，寫個入門教程吧。

簡單使用

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

data(){
  return{
    columns: [...],  //標題行數(shù)據(jù)
    data: []  //一般為空，通過axios請求更新
  }
}

這樣寫，a-table就能簡單地把數(shù)據(jù)原樣渲染上去，這里有兩個參數(shù)介紹一下：

• columns: 表頭標題

columns: [
  { 
    title: 'Name',  //標題名字
    dataIndex: 'name',  //將渲染data-source里，name字段對應的數(shù)據(jù) 
    sorter: true,  //可選 本地排序使用函數(shù)，使用服務端排序設置為true
    width: '20%'  //可選 該列寬度，不設置默認為自適應
  },
  ...
]

• data: 渲染數(shù)據(jù)源
  就是要渲染的數(shù)據(jù)，數(shù)組內，一個對象對應一行數(shù)據(jù)

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

其他常用參數(shù)

• bordered: 是否顯示邊框 boolean
• loading: 加載中，是否顯示加載動畫 boolean | object
• title: 表格標題
• row-key: 每行的key值，用作區(qū)分每行的，如果數(shù)據(jù)源有id字段，可：

  :row-key='record => record.id'  //后面會講，record就是數(shù)據(jù)源里對應的該行的數(shù)據(jù)，是一個對象

• pagination: 分頁的設置 object

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

data(){
  return{
    pagination: {
       disabled: false,  //禁用分頁
       hideOnSinglePage: true, //只有一頁時是否隱藏分頁器
       pageSize: 10, //每頁條數(shù)，所有頁設置統(tǒng)一的條數(shù)
       pageSizeOptions: ['10', '20', '30'], //每頁顯示的條數(shù)，每頁設置不同的條數(shù)
       total: 100, //數(shù)據(jù)總數(shù)
    }
  }
}

自定義列

有時候只是把數(shù)據(jù)渲染上去還不能滿足要求，比如要顯示性別，后端傳過來的數(shù)據(jù)格式是：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: 要渲染的數(shù)據(jù)| record：該行的所有數(shù)據(jù) | index 該行的序號
  <template #sex='text, record, index'>  
    {{ text?'男':'女' }}
  </template>
</a-table>