基於Ant Design Vue創建的vue項目中表格組件的使用

近期項目中使用到了ant design，下面來講一下里面table組件的使用

1.基礎：引入ant-design-vue組件

2

   <a-table
      v-else
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      @change="pageChange"
      :loading='loading'
      >
    </a-table>

　　其中：columns表示的是表頭：

const columns = [
  {
    title: '姓名',
    key: 'name ',
    dataIndex: 'name',-------需要和后台返回的數據同名
    align: 'center',
    width: '30%'----寬度，可以指定也可以直接為數值
  },
  {
    title: '電話',
    key: 'phone',
    dataIndex: 'phone',
    align: 'center',
    width: '30%'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },--------后台返回的對象，數組，或者刪除編輯操作，不便直接展示-------此處即表示渲染action插槽
    align: 'center',
   width: '30%'
  }
]

　　dataSource:表示返回的數據，將后台返回的數據賦值即可

　　pagination:設置當前的currentPage(當前頁碼),pageSize（每頁數據條數）,total（數據總條數）下面是pagination的寫法，可以在請求數據的時候，傳入相應的值同時為total賦值

 pagination: {
        pageSize: 6,
        current: 1,
        total: 0
},

pageChange：翻頁，再次調用查詢接口，傳入相應頁碼，頁面數據條數即可

 pageChange(pagination) {
      this.pagination = pagination
      this.select()
}

loading是加載動畫。當數據未顯示的時候可以使用loading為true,待獲取到數據，改為false即可
插槽使用：

 <div slot="action" slot-scope="text, record">----------record即每條數據，相當於v-for中定義的item,如有編輯操作，則根據需要傳遞值
        <template>
          <a @click="Delete(record)" style="color:#DC322F;">刪除</a>
        </template>
  </div>

 

  <span slot="address" slot-scope="text,record">
        {{record.time}}
        <br />
        {{record.address}}
  </span>

第一次使用這個框架，部分解決方法不夠簡便，只在於能夠實現功能，如有高手。歡迎指正