vue中使用el-table组件进行分页多选，回显、切换分页记住上一页所勾选和取消的选项_斯图尔te的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
使用el-table：

1、el-table方法： select和select-all 、 toggleRowSelection和clearSelection
2、el-table-column类型： type="selection"
3、分页组件： Pagination （将el-pagination封装过一层）
逻辑代码说明在最下面。
<el-dialog
   title="产品列表"
   width="69%"
  :visible.sync="visible"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  :destroy-on-close="true"
  :before-close="handleClose"
  <el-divider></el-divider>
  <el-table
  	ref="multipleTable"
  	row-class-name="pointer"
    :data="productList.list"
    @select="handleSelectionChange"
    @select-all="handleAllChange"
    <el-table-column type="selection" align="center" width="55" />
    <el-table-column label="方案状态">
      <template slot-scope="scope">{{ scope.row.schemaStatustext || '--' }}</template>
    </el-table-column>
    <el-table-column label="产品方案名称">
      <template slot-scope="scope">{{ scope.row.schemaName || '--' }}</template>
    </el-table-column>
  </el-table>
  <div style="text-align: right">
    <pagination
      v-show="productList.total > 0"
      :total="productList.total"
      :page.sync="listQueryPage1"
      :limit.sync="listQueryLimit1"
      @pagination="getQueryPages"
  </div>
  <el-row>
    <el-button type="default" @click="exit">退出</el-button>
    <el-button type="primary" @click="save">保存</el-button>
  </el-row>
</el-dialog>
data() {
    return {
      productList:{},
      echoList: [],
      visible: false
// 以下方法在methods中
methods:{
    // 显示dialog框
    showproductsList() {
      this.dialogVisible = true;
      // 获取回显数据列表
      this.getchannelRelas();
      // 获取分页列表
      this.getQueryPages();
    // 关闭dialog框
    exit() {
      // 清空未保存的勾选、取消状态
      this.$refs.multipleTable.clearSelection();
      this.visible = false;
    // 点击dialog右上角关闭图标或者点击ESC按键，隐藏dialog框时触发。
    handleClose(down) {
      this.$refs.multipleTable.clearSelection();
      down();
    // 分页获取table列表，每次切换页码时都会执行该方法
	getQueryPages() {
	  this.$store.dispatch('channel/querypageps', {
	      page: 1,
	      limit: 10,
	      queryCondition: {}
	    .then(res => {
	      const { status, data } = res;
	      if (status === 200) {
	        this.productList = { ...data };
	        this.$nextTick(() => {
	          this.productList.list.forEach(item => {
	            // 重点： 在当前分页列表中查询与回显数据是否有一致的id，一致则勾选数据回显
	            // toggleRowSelection(item, true)：设置当前行数据为选中状态
	            if (this.echoList.includes(item.id)) {
	              this.$refs.multipleTable.toggleRowSelection(item, true);
	          });
	        });
	    });
	// 获取回显数据
	getchannelRelas() {
	  this.$store.dispatch('channel/channelRelas', {
	      id: this.channelleaseId
	    .then(res => {
	      const {status, data } = res;
	      if (status === 200 && data) {
	        // 筛选回显数据的id，生成数组，根据id来勾选数据
	        this.echoList= data.map(item => item.id);
	    });
    // 选择关联产品：打勾或取消
    handleSelectionChange(selecteds, row) {
      if (!this.echoList.includes(row.id)) {
        // 回显数据里没有本条，把这条加进来(选中)
        this.echoList.push(row.id);
      } else {
        // 回显数据里有本条，把这条删除(取消选中)
        this.echoList.forEach((id, index) => {
          if (id === row.id) {
            this.listId.splice(index, 1);
        });
    // 全选、取消全选
    handleAllChange(selecteds) {
      if (selecteds.length > 0) {
        selecteds.forEach(item => {
          if (!this.echoList.includes(item.id)) {
            this.echoList.push(item.id);
        });
      } else {
        this.productList.list.forEach(item => {
          this.echoList.forEach((id, index) => {
            if (id === item.id) {
              this.echoList.splice(index, 1);
          });
        });
以上部分就是核心代码，理解流程逻辑，就能明白分页、多选、回显的真谛了。 
回显数据：
 显示dialog时获取echoList（回显数据）以及产品列表（productList）第一页数据。其实这里应该使用async和await方式，因为两个函数是异步操作，无法判断先后顺序，先不管这个。在获取productList后循环判断是否与echoList匹配，如果匹配则使用this.$refs.multipleTable.toggleRowSelection(item, true)方式勾选数据，当切换分页的时候还会继续执行以上的判断。回显数据就写完了。 
单项勾选以及取消勾选，全选以及取消全选：
 单项勾选操作方法：handleSelectionChange，当点击checkbox时，循环判断echoList中是否有当前行信息，若是没有，则说明是选中状态，push进echoList中；若是存在当前行信息，则说明是取消勾选，则将echoList中当前行id删除。 
全选操作方法：handleAllChange，全选方法有一个参数selecteds，这是一个选中项数组，记录了有多少条选中项；当进行全选操作时，判断selecteds数组的length，若length>0，循环selecteds判断echoList数组中是否与selecteds中id匹配，若不匹配，则表示新增选中项，循环判断是为了去除重复项，还有一种简单的去除数组重复项的方法，使用Set：Array.from(new Set(this.echoList))；若length===0，则代表取消勾选项，这时候一定要循环productList，判断echoList中的id是否与productList中的id是否匹配，若匹配，则删除取消项。 
当前操作与回显数据操作结合使用，则切换分页记住勾选取消状态便成功了。 
关闭dialog框清除未保存过的状态
 当勾选或取消勾选时，未进行保存，则关闭页面重新进来时，应当初始化勾选的状态，未保存过的状态不应该存在。则可以使用**this.$refs.multipleTable.clearSelection()**方法来初始化数据。 
若有问题，随时欢迎。
                    需求：1、table表格多选，并且切换分页之后能记住上一页的选项；2、回显数据，切换分页之后再切换回来依然能回显数据；3、点击选项，未保存数据，切换页面后再切换回来初始化数据勾选状态；4、全选，取消全选数据正常变化。5、使用了dialog来显示table；6、后台分页。使用el-table：1、el-table方法：select和select-all 、toggleRowSelection和clearSelection2、el-table-column类型：type="selection"
之前有一个是基于 vue2 开发的
vue3-pro-table 是基于 vue3 开发
一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量
配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果
配置化的表格项，跟 el-table-column 的配置属性类似
配置化的搜索表单，支持大部分表单元素
配置化的分页，跟 el-pagination 的配置属性类似
自定义是否显示搜索和分页
自定义标题栏和工具栏
丰富的插槽提供功能扩展
安装和引入
// npm
npm install vue3-pro-table
// yarn
yarn add vue3-pro-table
该组件依赖
				vue3 element puls表格跨页全选实现，vue3 element puls表格,后端分页时,实现分页多选功能，element puls跨页多选，element puls 表格跨分页多选及回显的实现示例，表格分页多选功能，vue3 elementPlus设置表格跨页勾选，vue3 Element plus 最新分页跨页全选操作(跨页记住已经勾选)，vue3 element plus table组件跨分页多选及回显，vue3 element plus el-table-column type="se
但是实现代码中传入数据的时候却无法实现多选框的回显
想要实现的功能:已经选中的数据可以在table中实现回显。每次切换分页时，可以保存上一页选中的数据
:row-key="getRowVoucherKeys"和:reserve-selection="true"缺一不可
				今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。
今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的页码处。
然后想了想，想起了.sync这个语法糖，让数据进行双向绑定。
直接上修改的代码看看
<el-pagination
  :current-page.sync=currentPage
  :page-sizes=[10, 30, 50]
  :page-size=pageSize
  :total=total
  layout=tota
1.因为第一次加载下拉框列表的时候，请求列表中所有数据和列表默认回显数据不同，所以会出现被刷新，而出现回显随机问题，，，
PS：vue 运用ElementUI,做select下拉框回显 
第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。
      v-loading="loading"
      element-loading-text="加载中..."
      @selection-change="handleSelectionChange"
      :row-key="k
<template>
  <el-select v-model="selectedOptions" multiple placeholder="请选择">
    <template #default>
      <el-checkbox-group v-model="selectedOptions">
        <el-checkbox label="Option 1"></el-checkbox>
        <el-checkbox label="Option 2"></el-checkbox>
        <el-checkbox label="Option 3"></el-checkbox>
      </el-checkbox-group>
    </template>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      selectedOptions: []
</script>
在上面的代码中，我们使用el-select的slot来自定义下拉框的选项，然后在自定义选项中使用el-checkbox-group实现多选。v-model绑定了选中的选项，即selectedOptions。