解决 el-table 多选框,前端分页,选中失效问题;多选改为单选_el-table的reserve-selection和rowkey都有,但是没效果-程序员宅基地

技术标签: elementui  前端  vue.js  

一、1. 在 el-table 中增加 row-key=“id”

<el-table
        ref="multipleTableRef"
        :data="
          state.tableData.slice(
            (state.currentPage - 1) * state.PageSize,
            state.currentPage * state.PageSize
          )
        "
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="id"
>
  1. 在多选框列中增加 reserve-selection,如下:
 <el-table-column type="selection" reserve-selection/>
  1. el-table el-paginaton 前端分页
    (1)添加 el-paginaton
 <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="state.currentPage"
          :page-sizes="state.pageSizes"
          :page-size="state.PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.totalCount"
        >
</el-pagination>Ï

(2) js中

const state = reactive({
  //分页 总数据
  tableData: [],
  // 默认显示第几页
  currentPage: 1,
  // 总条数,根据接口获取数据长度(注意:这里不能为空)
  totalCount: 0,
  // 个数选择器(可修改)
  pageSizes: [10, 20, 30, 40, 50],
  // 默认每页显示的条数(可修改)
  PageSize: 10,
});
// 每页每条显示的条数
const handleSizeChange = (val: any) => {
  // 改变每页显示的条数
  state.PageSize = val;
  // 注意:在改变每页显示的条数时,要将页码显示到第一页
  state.currentPage = 1;
};
const handleCurrentChange = (val: any) => {
  state.currentPage = val;
};

二、表格多选改为单选的实现

	<el-table
      :data="state.tableData"
      style="width: 100%"
      ref="multipleTableRef"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @select="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" reserve-selection />
      <el-table-column prop="number" label="编号" width="80" />
   </el-table>
const state = reactive({
    
  tableData: [
    {
    
      id: "1",
      number: "1",
    },
    ],
  selectId: "",
});
const handleSelectionChange = (selection: any, row: any) => {
    
  state.selectId = row.id;
  // 清除 所有勾选项
  multipleTableRef.value.clearSelection();
  // 当表格数据都没有被勾选的时候 就返回
  // 主要用于将当前勾选的表格状态清除
  if (selection.length == 0) return;
  multipleTableRef.value.toggleRowSelection(row, true);
  console.log("表格事件 ",JSON.parse(JSON.stringify(row)));
};

以上。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lareinax5/article/details/131281283

智能推荐

python-18-正则表达式_python18-程序员宅基地

文章浏览阅读6.2k次。01-导入模块这里需要先写一个demo.pyclass Person(object): def __init__(self, name): self.name = name def eat(self, food): print(self.name + '正在吃' + food) def sleep(self): print(self.name + '正在睡觉')_p = Person('zhangsan')# p._python18

大型情感剧集Selenium:4_老中医教你(单/多/下拉框)选项定位-程序员宅基地

文章浏览阅读262次。又要开篇叨叨昨天没有更新,但因为下大雨没撸串,陪孩子玩了下前一天写的Flask开发猜数字小游戏---聪明的奥特曼,发现代码有些bug,进行了修改,另外只是名字叫聪明的奥特曼,我的俩爷不买账啊,没办法,将成功的alert改为展示奥特曼的图片,才把他俩打发。至于做对?别逗了,我都改成猜1-4了都各种错,就急着点完了看奥特曼,真是气死我了.....今天讲什么讲什么标题说了,讲sel..._python 根据title定位选项框

前端提高篇(九十四):jQuery鼠标事件-程序员宅基地

文章浏览阅读833次,点赞26次,收藏26次。javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。

IntelliJ:idea怎么设置eclipse快捷键_idea修改快捷键为eclipse-程序员宅基地

文章浏览阅读1k次。idea怎么设置eclipse快捷键_idea修改快捷键为eclipse

世界时间经纬_世界主要城市经纬度及时区列表-程序员宅基地

文章浏览阅读4.7k次。◎欧洲各地经纬度简表国家 城市 经度 纬度 时区 罗马尼亚 布加勒斯特 东经26:06 北纬44:26 +2保加利亚 索非亚 东经23:19 北纬42:41 +2希腊 雅典 东经23:43 北纬37:58 +2希腊 斯巴达 东经22:25 北纬37:05 +2马其顿 斯科普里 东经21:28 北纬42:00 +2波兰 华沙 东经21:00 北纬52:15 +1南斯拉夫 贝尔格莱德 东经20:30 ..._全球城市经纬度

ZOJ 2112 Dynamic Rankings (动态第k大,树状数组套主席树)_动态第k大 树状数组套平衡树-程序员宅基地

文章浏览阅读294次。题目链接:题目大意:询问一个区间的第k大 但是有操作会对某个位置的值进行改变 即动态第k大思路:树状数组套主席树普通主席树装未修改的数据树状数组套主席树装的是修改的数据,即修改操作在树状数组中进行#include #include #include #include #include #include #include #include #include _动态第k大 树状数组套平衡树

随便推点

LSF系统介绍_lsf分组-程序员宅基地

文章浏览阅读1.4w次。LSF系统介绍http://scc.ustc.edu.cn/zh_CN/ 中科大超算中心http://www.sccas.cn/gb/index.html 中科院超算中心http://www.ssc.net.cn/ 上涨超算中心LSF简介LSF(Load Sharing Facility)是分布资源管理的工具,用来调度、监视、分析联网计算机的负载。目的通过集中监控和调度,充分共享计算机的CPU_lsf分组

鸿蒙开发初体验-程序员宅基地

文章浏览阅读5.1k次。/ 今日科技快讯 /近日,字节跳动回应:由美国CFIUS调查及“总统令”引发对TikTok的大量关注与报道,其中有很多猜测和不实信息。真实情况是, 我们确实在与一些公司探讨合作方..._鸿蒙的开发

python 获取窗口句柄 模拟 点击按钮,python和pywin32实现窗口查找、遍历和点击-程序员宅基地

文章浏览阅读9.9k次,点赞5次,收藏45次。1.如何利用句柄操作windows窗体首先,获得窗体的句柄 win32api.FindWindows()第二,获得窗体中控件的id号,spy++第三,根据控件的ID获得控件的句柄(hwnd) GetDlgItem(hwnd,loginID)最后,利用控件句柄进行操作python可以通过win32api轻松获取控件的属性值通过标签找到主窗口句柄,然后通过主句柄获取下属控件句柄#-*- codin..._python 获取窗口句柄 模拟 点击按钮

以集群方式运行pyspark_spark.yarn.appmasterenv.pyspark_python-程序员宅基地

文章浏览阅读2.4k次。一、背景说明  单机执行pyspark(python on spark)非常简单,只要在脚本所在服务器上部署个python环境或Anaconda这种集成运行环境,再通过python3命令执行就完了。  而想将python提交到spark集群中运行,则有两种方法,一种是在每个spark结点上部署python环境,在spark低版本与python集成没那么完善的时候,集群结点数又不多的情况下,的确可以这么干(实际上我就这么干过),这种方式比较大的优势是每次执行pyspark任务时,不用分发python环_spark.yarn.appmasterenv.pyspark_python

Android修行手册 - 实现POI上万行的大数据量Excel读写操作,解决内存溢出_android 读取超大excel文件-程序员宅基地

文章浏览阅读1.5k次,点赞15次,收藏11次。搞过POI的都知道,在处理Excel文件时,POI提供了两种模式:用户模式和SAX事件驱动模式。用户模式API丰富使用起来相对简单,但当遇到大文件、大量数据或复杂格式时,可能会导致内存溢出。因此,官方推荐使用SAX事件驱动模式来解析大型Excel文件。开始想解决方法之前,我们要先知道 Excel2003与Excel2007 的区别。_android 读取超大excel文件

cordova通过原生实现自定义功能_cordova 连拍-程序员宅基地

文章浏览阅读1w次。先闲谈说下最近的微信要出的小程序吧,感觉确实很牛逼,革命说不上吧但是也是一个新的大的机遇。不得不承认腾讯有两个相当好的平台,一个是QQ,一个是微信,毕竟人数基数大,任何新的东西都会带来相当多的机会和挑战。那个小程序好像是基于react native,也是一种混合架构。最近整理整理下混合架构的知识,有时间也好好学习去。 好了开始正题吧。 最近研究cordova通过原生_cordova 连拍

推荐文章

热门文章

相关标签