表格分页注意点
1、表格添加 row-key,行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。
2、表格添加selection-change事件 当选择项发生变化时会触发该事件
html
<el-table
ref="dataTable"
v-loading="loading"
:data="tableDate"
// row-key
:row-key="getRowKey"
border
// 选中事件
@selection-change="handleTerSelectionChange"
>
<el-table-column
type="selection"
:selectable="checkSelectable"
:reserve-selection="true"
width="40"/>
<el-table-column prop="name" label="名称" align="center"/>
<el-table-column prop="number" label="IP数量" align="center" width="120"/>
...
</el-table>
// 分页
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[10, 20, 30, 50]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
js
data() {
return {
current: 1,
size: 10,
total: 0,
tableData: [],
multipleSelection: []
}
},
methods: {
getDate() {
...获取数据
},
getRowKey(row) {
return row.id
},
// 禁止选择
checkSelectable(row) {
// id 为1 的所在行不能被选中
return row.id === 1
},
// 选中事件
handleSelectionChange(val) {
this.multipleSelection = val
},
// 分页修改煤业多少条
handleSizeChangeSign(val) {
this.size = val
this.getTsList(this.terSearchForm)
},
// 分页修改页数
handleCurrentChangeSign(val) {
this.current = val
this.getDate()
},
}