vue 基于el-table实现多页多选/单选、翻页回显过程
type="selection"可以设置表格进行多选 row-key 指定数据的 Key,用来优化 Table 的渲染。@selection-change="handleSelectionChange"这一个事件 是单选使用的 二选一。2.能实现的效果 一.表格多选 和 表格多选进行回显 二.表格单选 和 表格单选进行回显。@select单选的事件 @select-all多选的事件 这两个事件用于
·
1、问题:表格可以多选/单选 分页的时候 表格数据能进行回显
type="selection"可以设置表格进行多选 row-key 指定数据的 Key,用来优化 Table 的渲染
@select单选的事件 @select-all多选的事件 这两个事件用于多选使用
@selection-change="handleSelectionChange"这一个事件 是单选使用的 二选一
2.能实现的效果 一.表格多选 和 表格多选进行回显 二.表格单选 和 表格单选进行回显
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%; margin-right: 20px"
class="typeTable"
ref="typeTable"
row-key="getRowKeys"
@select="handleCheckBox"
@select-all="handleSelectAll"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" fixed />
</el-table>
data() {
return {
tableData: [],
selectExportId: [], // 多选表格的id
}
methods:{
getRowKeys(row) {
return row.id;
},
// 这两个事件 注意 @select="handleCheckBox" @select-all="handleSelectAll"
// 单个选中 方法 多选单选都是这个
handleCheckBox(rows, row) {
if (this.selectExportId.find((i) => i === row.id)) {
this.selectExportId = this.selectExportId.filter((i) => i != row.id);
} else {
this.selectExportId.push(row.id);
}
},
// 全选方法
handleSelectAll(rows) {
if (rows.length) {
rows.forEach((row) => {
if (!this.selectExportId.find((item) => item == row.id)) {
this.selectExportId.push(row.id);
}
});
} else {
this.tableData.forEach((row) => {
this.selectExportId = this.selectExportId.filter(
(item) => item != row.id
);
});
}
},
// 请求方法
getTableData(){
请求接口.then(res=>{
const { rows, total, pageNum } = res.data;
this.tableData = rows;
this.total = total;
this.pages.pageNum = pageNum;
this.loading = false;
this.$nextTick(() => {
// 选中的表格 多选 回显的方法 根据id进行回显的
this.tableData.forEach((item, index) => {
if (this.selectExportId.findIndex((i) => i === item.id) >= 0) {
this.$refs.typeTable.toggleRowSelection(
this.$refs.typeTable.data[index],
true
);
}
// 选中的表格行 单选 回显的方法 两个留一个 看需求
const index = this.tableData.findIndex(
(i) => i.id === this.selectExportId
);
if (index >= 0) {
this.$refs.typeTable.toggleRowSelection(
this.$refs.typeTable.data[index],
true
);
}
});
});
})
},
// 单选的选中事件 如果单选的话 把下面的样式也写上 隐藏表头全选
handleSelectionChange(selection) {
if (selection.length > 1) {
this.$refs.typeTable.clearSelection();
this.$refs.typeTable.toggleRowSelection(selection.pop());
} else if (selection.length === 1) {
this.selectExportId = selection[0].id;
}
},
}
// 将表头全选按钮 进行隐藏 不让全选
<style scoped lang="scss">
.typeTable {
::v-deep .el-table__fixed-header-wrapper {
.el-table-column--selection {
.el-checkbox {
display: none !important;
}
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)