Vue2表格（Table）

Vue3表格（Table）

自定义传入：

• 表格列的配置项（columns）
• 表格数据数组（dataSource）
• 分页器，为false时不展示和进行分页（pagination）
• 只有一页时是否隐藏分页器（hideOnSinglePage）
• 数据总数（total），默认为0
• 页面是否加载中（loading），默认为false

整体样式模仿ant-design，效果图如下：

1.初始加载数据时的表格样式：

2.有数据并带分页时的表格样式：

3.有数据无分页时的表格样式：

 4.无数据时的表格样式：

包含加载中组件和分页组件的表格Table

①创建带分页表格组件Table.vue：

 ②在要使用的页面引入：

import Table from '@/components/Table'
components: {
    Table
}
loading: false,
total: 10,
queryParams: {
	pageSize: 3,
	p: 1,
	mod: 'search'
},
columns: [
        {
          title: '名字',
          width: 100,
          dataIndex: 'name',
          slot: 'name'
        },
        {
          title: '年龄',
          width: 100,
          dataIndex: 'age'
        },
        {
          title: '职业',
          width: 100,
          dataIndex: 'job',
          slot: 'job'
        },
        {
          title: '性别',
          width: 100,
          dataIndex: 'sex'
        },
        {
          title: '地址',
          width: 120,
          dataIndex: 'address'
        }
],
tableData: [
        {
          name: 'Stephen',
          age: 30,
          job: 'player',
          sex: '男',
          address: 'CaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCalifornia'
        },
        {
          name: 'Leo',
          age: 36,
          job: 'actor',
          sex: '男',
          address: 'LA'
        },
        {
          name: 'Mr.Dear',
          age: 23,
          job: 'boy',
          sex: '男',
          address: 'Beijing'
        },
        {
          name: 'superman',
          age: 32,
          job: 'boy',
          sex: '男',
          address: 'US'
        }
]
onChangeTable (pagination) {
      console.log('pagination:', pagination)
      this.queryParams.p = pagination.p
      this.queryParams.pageSize = pagination.pageSize
      this.getData()
},
getData () {
      this.tableLoading = true
      // 调用分页接口获取列表数据
}