基于ant-design-vue table 组件的使用

需求分析：这里主要介绍表格的字段渲染（筛选和排序），分页设置，选择功能设置等功能。

1.表格渲染（筛选和排序）

<a-table ref="TableInfo"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="pagination"
  :loading="loading"
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  :scroll="{ x: 900 }"
  rowKey="userId"
  @change="handleTableChange">
  <template slot="operation" slot-scope="text, record">
    <a-icon type="eye" theme="twoTone" twoToneColor="#42b983" @click="view(record)" title="查看"></a-icon>
    &nbsp;
    <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改用户"></a-icon>
    &nbsp;
  </template>
</a-table>

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple用于指定多选和单选。filteredValue 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 。customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引（text, row, index）

const columns = [{
  title: '状态',
  dataIndex: 'status',
  customRender: (text, row, index) => {
    switch (text) {
      case '0':
        return <a-tag color="red">停用</a-tag>
      case '1':
        return <a-tag color="cyan">启用</a-tag>
      default:
        return text
    }
  },
  filters: [
    { text: '启用', value: '1' },
    { text: '停用', value: '0' }
  ],
  filterMultiple: false,
  filteredValue: filteredInfo.status || null,
  onFilter: (value, record) => record.status.includes(value)
}];

对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。sorter: function(rowA, rowB) { ... }， rowA、rowB 为比较的两个行数据。

const columns = [{
  title: '创建时间',
  dataIndex: 'createTime',
  sorter: true,
  sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order
}]

可控的筛选和排序 ：使用受控属性对筛选和排序状态进行控制。

1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。
2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
3. 务必指定 column.key

computed: {
  columns () {
    let { sortedInfo, filteredInfo } = this
    sortedInfo = sortedInfo || {}
    filteredInfo = filteredInfo || {}
    return [{
      title: '账号',
      dataIndex: 'username'
    }, {
      title: '状态',
      dataIndex: 'status',
      customRender: (text, row, index) => {
        switch (text) {
          case '0':
            return <a-tag color="red">停用</a-tag>
          case '1':
            return <a-tag color="cyan">启用</a-tag>
          default:
            return text
        }
      },
      filters: [
        { text: '启用', value: '1' },
        { text: '停用', value: '0' }
      ],
      filterMultiple: false,
      filteredValue: filteredInfo.status || null,
      onFilter: (value, record) => record.status.includes(value)
    }, {
      title: '上次登录时间',
      dataIndex: 'lastTime',
    }, {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
    }]
  }
},

通过调用 change 方法时，分页、排序、筛选变化时触发。

handleTableChange (pagination, filters, sorter) {
  // 将这三个参数赋值给Vue data，用于后续使用
  this.paginationInfo = pagination
  this.filteredInfo = filters
  this.sortedInfo = sorter

  this.fetch({
    sortField: sorter.field,
    sortOrder: sorter.order,
    ...this.queryParams,
    ...filters
  })
},

通过上面的方法，可以获取到 filters 输出的信息为：

{"status":["1"]}

获取到 sorter 输出信息为：

{
  "column": {
    "title": "创建时间",
    "dataIndex": "createTime",
    "sorter": true,
    "sortOrder": false
  },
  "order": "ascend",
  "field": "createTime",
  "columnKey": "createTime"
}

2.分页设置

pagination 分页器，设为 false 时不展示和进行分页，类型为 object 。

defaultCurrent	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
pageSizeOptions	指定每页可以显示多少条	string[]	['10', '20', '30', '40']
showQuickJumper	是否可以快速跳转至某页	boolean	false
showSizeChanger	是否可以改变 pageSize	boolean	false
showTotal	用于显示数据总量和当前数据顺序	Function(total, range)	-

pagination: {
  pageSizeOptions: ['10', '20', '30', '40', '100'],
  defaultCurrent: 1,
  defaultPageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
},

Table 组件中，通过调用 change 方法时，分页、排序、筛选变化时触发。

{
  "pageSizeOptions": ["10", "20", "30", "40", "100"],
  "defaultCurrent": 1,
  "defaultPageSize": 10,
  "showQuickJumper": true,
  "showSizeChanger": true,
  "current": 1,
  "pageSize": 10,
  "total": 2
}

3.选择功能设置

rowSelection ：列表项是否可选择，类型为 object，默认值为 null。

selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合	string[]	[]
onChange	选中项发生变化时的回调	Function(selectedRowKeys, selectedRows)	-

<a-table ref="TableInfo"
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
  。。。
</a-table>

通过调用 onChange 方法，且将选中的值设置在 selectedRowKeys 数组中。

onSelectChange (selectedRowKeys) {
  this.selectedRowKeys = selectedRowKeys
},

完整案例：

fetch (params = {}) {
  // 显示loading
  this.loading = true
  if (this.paginationInfo) {
    // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
    this.$refs.TableInfo.pagination.current = this.paginationInfo.current
    this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
    params.pageSize = this.paginationInfo.pageSize
    params.pageNum = this.paginationInfo.current
  } else {
    // 如果分页信息为空，则设置为默认值
    params.pageSize = this.pagination.defaultPageSize
    params.pageNum = this.pagination.defaultCurrent
  }
  this.$get('user', {
    ...params
  }).then((r) => {
    let data = r.data
    const pagination = { ...this.pagination }
    pagination.total = data.total
    this.dataSource = data.rows
    this.pagination = pagination
    // 数据加载完毕，关闭loading
    this.loading = false
  })
}