vue3:el-table多选框设置默认选中,翻页保留选中状态

2023-11-16

问题:el-table多选框设置默认选中,进行翻页,之前选中的数据没有保留选中状态

   <template>
    <el-table
      style="width: 100%"
      border
      :data="state.usersData"
      @selection-change="userSelectionChange"
      ref="multipleTable"
      :row-key="getRowKeys"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true" />
      <el-table-column property="nickName" label="用户名" />
      <el-table-column property="name" label="姓名"  />
      <el-table-column property="mobile" label="手机号"/>
      <el-table-column property="email" label="邮箱"/>
    </el-table>
    <el-pagination
      :current-page="state.paramData.page"
      :page-size="state.paramData.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :background="true"
      :total="state.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </template>
    <script setup>
    import {watch,reactive,ref} from "vue"
    import { getUsers} from "@/api/course.js";
const state=reactive({
   tableData:[],
   selectedData:[],
   paramData:{
     page:1,
     pageSize:10
      },
    total:0
    })
    watch(
  () => state.paramData,
  () => {
    getUserMessage();
    reserveSelection();
  },
  { deep: true }
);
    //获取表格数据
const getMessage=async ()=>{
         const {data}=await getUsers();
         state.tableData=data;
    }
    //用户数据反显(默认选中)
const multipleTable = ref();
const reserveSelection = () => {
  if (selectData.value.length !== 0) {
    selectData.value.forEach((item) => {
      setTimeout(() => {
        multipleTable.value.toggleRowSelection(item, true); //让页面显示选中的数据
      }, 0);
    });
  }
};
//指定key值,数据更新之后保留之前选中的数据
const getRowKeys = (row) => {
  return row.userId;
};

const handleCurrentChange = (val) => {
  state.paramData.page = val;
};
const handleSizeChange = (val) => {
  state.paramData.pageSize = val;
};
const userSelectionChange = (values) => {
  state.selectedData = [...values];
};
        
    </script>

总结步骤:
1.在el-table标签中加入:row-key=“getRowKeys”
2.在el-table-column中的第一行加入type=“selection” 和:reserve-selection=“true”
3.使用el-table 中的 toggleRowSelection 方法,其中该方法的第二个参数设置为true则为选中

注意:在使用toggleRowSelection方法时要在异步操作(setTimeout或nextTick)里面进行,因为当数据发生变化后,vue的依赖监听并更新视图过程是异步进行的,所以此时视图更新任务还在等待,此时通过ref操作dom是无效的

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3:el-table多选框设置默认选中,翻页保留选中状态 的相关文章

随机推荐

  • 2020年数学建模国赛C题题目和解题思路

    2020年数学建模国赛C题题目 在实际中 由于中小微企业规模相对较小 也缺少抵押资产 因此银行通常是依据信贷政策 企业的交易票据信息和上下游企业的影响力 向实力强 供求关系稳定的企业提供贷款 并可以对信誉高 信贷风险小的企业给予利率优惠 银
  • 安全防御——防火墙一

    安全防御 防火墙一 1 什么是防火墙 2 互联网为什么会出现防火墙 3 状态防火墙工作原理 4 防火墙如何处理双通道协议 5 防火墙如何处理nat 6 你知道哪些防火墙 以及防火墙的技术分类 防火墙种类 1 硬件防火墙 2 软件防火墙 个人
  • Qt入门(12)——Qt国际化

    应用的国际化就是使应用成为能被非本国的人使用的过程 有的情况下 国际化很简单 例如 使一个US应用可被Australian或者British用户理解 工作可能少于几个拼写修正 但是使一个US应用可以被Japanese用户使用 或者一个Kor
  • React 在componentDidMount使用 echarts,样式未加载导致Echart自适应div出错

    只需要修改componentDidMount中加入setTimeout gt echarts代码 import React Component from react import Main css 引入 ECharts 主模块 ts ign
  • 创建聚集索引

    一 ibuf init at db start Creates the insert buffer data structure at a database startup and initializes the data structur
  • 深度学习(十九)——FCN, SegNet, DeconvNet, DeepLab, ENet, GCN

    前DL时代的语义分割 续 Grab cut Grab cut是微软剑桥研究院于2004年提出的著名交互式图像语义分割方法 与N cut一样 grab cut同样也是基于图划分 不过grab cut是其改进版本 可以看作迭代式的语义分割算法
  • JDBC操作

    目录 一 实现JDBC步骤 1 注册驱动 1 1导入驱动包 1 1异常处理 2 创建连接 2 1导包 2 2处理异常 3 得到执行sql语句的Statement对象 3 1修改数据操作 3 2删除数据操作 3 3插入数据操作 3 4查询数据
  • vue-quill-editor富文本编辑器的汉化版 及 使用心得

    现在网上上有很多的富文本编辑器 但我个人还是非常喜欢Vue家族的vue quill deitor 虽然说它只支持IE10 好 废话不多说直接上代码 现在是见证奇迹的时刻 在vue中使用quill呢 我们需要npm进行安装 安装命令如下 第一
  • spring security 实现免登陆功能

    spring security 实现免登陆功能大体也是基于COOKIE来实现的 主要配置信息
  • Spring Boot系列之修改内置Tomcat版本

    背景 在 spring boot 出来之前 或者没有使用 spring boot 时 Java EE 开发时如果选择 tomcat servlet 需要自己指定 tomcat 版本 此处没有考虑那种直接把打包的 war 直接扔到本地安装的任
  • oracle云避坑小记

    前言 最近白嫖oracle云 用于评估arm64 架构的服务器 发现 oracle 云系统和国内的主要云服务厂商 如 阿里云或者腾讯云 默认的一些策略有所不同 以下是一些避坑指南 一 避坑小记 基于 oracle linux 8 关闭 fi
  • 《代码大全2》第3章 三思而后行,前期准备

    目录 前言 本章主题 3 1 前期准备的重要性 3 1 1 处于不同阶段强调质量 3 1 2 前期准备对 构建活动 的影响 3 1 3 准备不周全的诱因 3 1 4 我理解的准备周全 纯属个人理解 3 2 辨明你所从事的软件的类型 3 2
  • vue.config.js

    vue config js相关的知识信息 一 vue config js是vue打包管理的配置文件 旨在给开发者们自定义自己的配置 1 该文件的根式统一 为导出配置项选项 例如 在对象里面书写我们自己的配置项目 二 具体的配置内容 项目中常
  • 0x00007FFD33144F99处(位于xx.exe中)引发的异常:Microsoft C++异常 查处方法

    一般这样的异常都是try catch语句有异常抛出 比如新建一个工程 int main try throw 1 catch int excep if excep 1 printf throw 1 n return 0 运行就会在输出的调试信
  • CAD球体密堆积3D插件 随机紧密堆积 球体堆积结构

    插件简介 CAD球体密堆积3D插件可用于生成随机紧密堆积的球体模型 插件可指定投放区域 球体集料的粒径范围 球体数量等信息 插件采用模拟重力作用下球体的碰撞堆积行为 实现球体集料的随机紧密堆积模型 插件通过AutoCAD软件进行绘图 生成的
  • CloudCompare——点云标注

    目录 1 概述 2 软件实现 3 合并点云 1 概述 对给定的点云添加分类标签 2 软件实现 1 裁剪点云 裁剪出需要标注的部分 并选中 2 进行标注 工具栏操作 Edit gt Scalar fields gt Add constant
  • [Python入门系列之十]Python 中的类和对象

    Python 中的类和对象 类和对象是面向对象编程 Object Oriented Programming 的基础 类是一种用户定义的数据类型 它封装了属性和方法 用于描述某一类对象的行为和特征 而对象则是类的实例化 是具体的 实际存在的实
  • Vue+ElementUI电商项目(六)

    订单列表 创建订单列表路由组件并添加路由规则 在view中新建orderManagement文件夹 新建Order vue组件 组件中添加代码如下
  • Pandas基本操作——增加、修改和删除

    数据的增加 按列增加数据 按行增加数据 增加多行数据 修改数据 修改列标题 使用DataFrame对象的columns属性直接赋值 使用DataFrame对象的rename方法修改列标题 修改行标题 使用DataFrame对象的index属
  • vue3:el-table多选框设置默认选中,翻页保留选中状态

    问题 el table多选框设置默认选中 进行翻页 之前选中的数据没有保留选中状态