el-table加分页后多选翻页和查询后仍保持选中状态及回显

1. 实现表格翻页和查询后仍保持选中状态：

        在 <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>

1. 实现表格多页面选中状态回显：

        使用 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 数组，以便在需要时可以访问选中的行数据。

这样，当你进行分页或搜索查询时，之前选中的行数据仍会保持选中状态。