-
实现表格翻页和查询后仍保持选中状态:
在 <el-table>
中添加 :row-key="getRowKeys"
,并在 el-table-column
的类型为 selection
的列中添加 :reserve-selection="true"
。在 methods
中添加 getRowKeys
方法来获取行的唯一标识,以便在翻页和搜索后保持选中状态。
<el-table
:row-key="getRowKeys"
:data="tableData"
class="common table"
key="table" stripe
ref="multipleTable"
highlight-current-row
@selection-change="handleSelectionChange"
>
<template slot="empty">
<i :class="table_empty_img"></i>
<p class="table_empty_text">{{dataText}}</p>
</template>
<el-table-column
type="selection"
align="center"
:reserve-selection="true"
width="50">
</el-table-column>
<el-table-column
label="序号"
type="index"
align="left"
width="60">
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="bus_no"
label="订单号"
min-width="110"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="unit_name"
label="场景名称"
min-width="100"
align="left"
>
<template slot-scope="scope">
{{scope.row._prop.type_name}}
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="app_name"
width="80"
label="申请人">
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="address"
min-width="100"
label="收款部门">
<template slot-scope="scope">
{{scope.row._prop.unit_name}}
</template>
</el-table-column>
</el-table>
<div class="tr">
<el-pagination
layout="sizes,prev, pager, next"
:page-size="tablePage[0]"
:total="tablePage[2]"
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="tablePage[1]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
-
实现表格多页面选中状态回显:
使用 el-table
中的 toggleRowSelection
方法实现选中状态的回显。将需要回显的数据的 ID 存储在 selectListData
数组中,并在适当的时候使用 toggleRowSelection
方法进行回显。
data() {
return {
tableData:[],
tablePage:[10,1,100],
selectPrj:[],//一页所选结项数组
}
},
methods: {
//----------------------------------未结算
//分页选择
handleCurrentChange(val){
this.tablePage[1] = val
this.Pagging()
this.setCheckedRows()
},
//表格容量
handleSizeChange(val){
this.tablePage[0] = val
this.loadOrderS()
},
//选取结算项目
handleSelectionChange(selection){
this.selectPrj = []
this.selectPrj = selection.map( (item) => item.bus_no)
},
// 4、回显已勾选的数据
setCheckedRows(){
let selectItem = []
this.tableData.forEach(item => {
this.selectPrj.forEach(bus_no => {
if(item.bus_no === bus_no){
selectItem.push(item)
}
})
})
this.$refs.multipleTable.toggleRowSelection(selectItem);
},
}
解析:
我们定义了一个表格组件,并将 tableData
数组绑定到表格的数据源。通过设置 :row-key
为 getRowKey
方法,我们确保使用每个行的唯一标识作为标识符。
在 handleRowClick
方法中,我们通过 $refs
引用到表格组件的实例,并使用 toggleRowSelection
方法切换行的选中状态。
通过 @selection-change
监听选中状态的变化,我们可以在 handleSelectionChange
方法中更新 selectedRows
数组,以便在需要时可以访问选中的行数据。
这样,当你进行分页或搜索查询时,之前选中的行数据仍会保持选中状态。