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

需求分析:这里主要介绍表格的字段渲染(筛选和排序),分页设置,选择功能设置等功能。

1.表格渲染(筛选和排序)


  

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

const columns = [{
  title: '状态',
  dataIndex: 'status',
  customRender: (text, row, index) => {
    switch (text) {
      case '0':
        return 停用
      case '1':
        return 启用
      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 停用
          case '1':
            return 启用
          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) -

  。。。

通过调用 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
  })
}

 

你可能感兴趣的:(ant-design-vue,table)