ant design of vue 組件使用

1、表格

1）分頁表格

<template>
  <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" :pagination="ipagination"/>
</template>
<script>
  const columns = [
    {itle: 'Name',dataIndex: 'name'},
    {title: 'Age',dataIndex: 'age'},
    {title: 'Address',dataIndex: 'address'}
  ]

  const data = []
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`
    })
  }

  export default {
    data () {
      return {
        data,
        columns
        ipagination: {
          current: 1,
          pageSize: 10,
          total: data.length,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10','20','30'],  //這里注意只能是字符串，不能是數字
          showTotal: (total, range) => `顯示${range[0]}-${range[1]}條，共有 ${total}條`
        }
      }
    }
  }
</script>