文章来源：https://www.toymoban.com/news/detail-535461.html
文章来源地址https://www.toymoban.com/news/detail-535461.html
<el-table
ref="tableRef"
:height="height"
v-loading="tableConfig.isLoading"
:data="tableData"
:row-key="handleRowKey"
@selection-change="handleSelectionChange"
>
<el-table-column :reserve-selection="true" type="selection" />
<el-table-column
type="index"
:index="indexMethod"
fixed="left"
/>
</el-table>
data() {
return: {
ids: []
}
}
porps: {
idName: {
type: String,
default: "id",
}, // 表格行的唯一标识,默认是 id
}
methods: {
/**
* @Event 方法
* @description: 切换分页时，保持选中状态的标识
* */
handleRowKey(row) {
return row[this.idName]
},
/**
* @Event 方法
* @description: 监听多选操作
* */
handleSelectionChange(selection) {
this.ids = selection.map((item) => item[this.idName])
},
/**
* @Event 方法
* @description: 设置表格后一页的index在前一页的index基础上累加
* @params: pageSize pageNum
* */
indexMethod(index) {
// return index + 1 // 如果不想要累加效果，请打开此项
return (
index +
this.paginationConfig.pageSize * (this.paginationConfig.pageNum - 1) +
1
);
},
}
到了这里，关于el-table实现分页切换后还能继续保持之前的勾选状态的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
