需求分析:这里主要介绍表格的字段渲染(筛选和排序),分页设置,选择功能设置等功能。
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
}]
可控的筛选和排序 :使用受控属性对筛选和排序状态进行控制。
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
})
}