1、为table添加分页: :pagination="pagination"
pagination: {
defaultPageSize: 10,
showTotal: (total) => `共${total} 条数据`,
total: 0,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50'],
onShowSizeChange: (current, pageSize) => {
this.pageSize = pageSize;
this.getTableData();
},
onChange: (page, pageSize) => {
this.pageSize = pageSize;
this.pageNum = page;
this.getTableData();
}
},
2、为table添加序号:在columns中: 添加一行: {"title": "序号",customRender: (value, row, index) => `${(this.pageNum-1)*10+index+1}`},
/**pageNum 当前第几页*/
3、 为table添加编辑、删除功能
<template slot="sensorId" slot-scope="text, record, index">
<span>
<a-button @click.native="editTableRow(record)" size="small" type="link">编辑</a-button>
<a-button @click.native="removeTableRow(record)" size="small" type="link">删除</a-button>
</span>
</template>
4、text:该行的值 record:该行的所有数据 index索引(参数分别为当前行的值,当前行数据,行索引)
5、table的选择行属性::row-selection="rowSelection" 既可以获得选择的行的key和行的数据
computed: {
rowSelection() {
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
props: {
disabled: record.name === 'Disabled User', // 当列中的name="disable user"时,该列不可用
name: record.name,
},
}),
}
}
}
6、表格排序:
首先设置排序的字段: sortField="dmaketime"
设置排序的方式: sortOrder="desc" desc为降序 ascend为升序