element table跨分页多选及回显的实现示例

1.data中定义getRowKeys，记录每行的key值

getRowKeys(row) {
   return row.id;
},

2.el-table绑定getRowKeys

<el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :row-key="getRowKeys"
>

3.将selection列的reserve-selection设为true

<el-table-column
    type="selection"
    width="50"
    align="center"
    :reserve-selection="true"
></el-table-column>

4.表格数据选中方法handleSelectionChange

handleSelectionChange(rows) {
    this.multipleSelection = rows;
    this.select_number = this.multipleSelection.length;
    this.select_Id = [];
    if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.select_Id.push(row.id);
          }
        });
    }
},

代码整理

<template>
  <div>
    <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column type="selection" width="50" align="center" :reserve-selection="true"> 
      </el-table-column>
    </el-table>
    <el-pagination>...</el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [], // 表格选中
      getRowKeys(row) {//记录每行的key值
        return row.id;
      },
      select_number: "", //表格select选中的条数
      select_Id: [], //表格select复选框选中的id
    }
  },
  methods: {
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
      this.select_number = this.multipleSelection.length;
      this.select_Id = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.select_Id.push(row.id);
          }
        });
      }
    },
  }
}

到此这篇关于element table跨分页多选及回显的实现示例的文章就介绍到这了,更多相关element table跨分页多选及回显内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • element编辑表单el-radio回显之后无法选择的问题解决

    element编辑表单el-radio回显之后无法选择的问题解决

    目录 前言 问题 网上的解决方案 前言 提前说明哦,这是一篇很基础类的文章,只适合小小白阅读,因为以下文章内容来源于我刚入行时的笔记.各位高人请绕道,避免浪费时间,谢谢~ 今天主要来谈一下element-ui编辑表单中的el-radio回显之后无法选择的问题,主要涉及到vue的双向绑定,以及element-ui编辑表单中的el-radio的默认类型. 问题 这是一个困扰了我半上午的bug,表单样式及代码如下. 问题是回显数据之后,当我点击其他的radio想要选择的时候,勾选不了. 在网上找到了一

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • element ui分页多选,翻页记忆的实例

    先说需求:实时记录当前选中的分页中的列表,分页保存数据,然后在用选中的数据进行某些操作:PS:左下角的数字为记录的当前选中的列表的和 直接上可用的代码,前提已配置好各种环境 HTML部分 <!--table组件需要使用ref="table"--> <template> <div> <el-table :data="tableData" ref="table" stripe style="widt

  • 详解element-ui级联菜单（城市三级联动菜单）和回显问题

    代码最下面 各项的参数截图 代码如下 <el-form-item label="户籍所在地" prop="censusLand" style="padding-left:57px"> <el-cascader v-model="ruleForm.censusLand" style="width:180px;padding-left:7px;width:270px" placeholder=

  • Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录. 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考. 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了.怎么办?当然是自己动手丰衣足食啦

  • 详解关于element级联选择器数据回显问题

    element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on

  • element table跨分页多选及回显的实现示例

    1.data中定义getRowKeys,记录每行的key值 getRowKeys(row) {    return row.id; }, 2.el-table绑定getRowKeys <el-table     :data="tableData"     @selection-change="handleSelectionChange"     :row-key="getRowKeys" > 3.将selection列的reserve

  • layui表格数据复选框回显设置方法

    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢? 每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除: table.render({ elem: '#LAY_table_topic', url: '/admin/to

  • element-ui select多选绑定回显值问题

    目录 element-ui select多选绑定回显值 element-ui下拉多选数据回显时无法进行修改 解决方案 总结 element-ui select多选绑定回显值 这是要最后实现的效果. <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @chang

  • Java基于Socket实现简单的多线程回显服务器功能示例

    本文实例讲述了Java基于Socket实现简单的多线程回显服务器功能.分享给大家供大家参考,具体如下: 需要两个类,一个是EchoServer,代表服务器.另外一个是EchoServerClient,代表客户端.代码如下: package interview; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter

  • vue如何基于el-table实现多页多选及翻页回显过程

    目录 1.问题交代: 2.实现的步骤 2.1  设置table标签 2.2 定义记录选择的数组 2.3 定义手动单选 和手动全选的函数/方法 2.4 写控制回显部分代码 总结 近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题. 1.问题交代: 在pc版的列表页面中,假设当前在列表的第一页,想要在当前页面选择几行数据,跳转到其他页面选择几行数据,选择后的数据页面展示为已勾选状态,经过跳转页面之后,数据选择状态依然存在,且可以将已选择的数据的id传到后端:即标题所述的实现

  • Element-UI中<el-cascader />回显失败问题的完美解决

    目录 项目场景: 问题描述 原因分析: 解决方案: 一.多选赋值回显 二.单选赋值回显 总结 项目场景: 项目场景:接手了一些老项目,需要做一些日志相关的操作,从后台日志跳转到相应页面要带上原来的请求参数,涉及到一个回显问题 问题描述 Element-UI的 <el-cascader /> 这个组件,赋值之后它不会回显!而且后端返回的值只有最后一级的id,可是一个劲看文档.找资料浪费大半天,所以总结了一个比较完美的办法 原因分析: value 属性才是回显的关键,只有绑定了value属性才会让

  • element跨分页操作选择详解

    本文实例为大家分享了element跨分页操作选择的具体代码,供大家参考,具体内容如下 业务需求:在批量导出或者批量删除的时候会涉及到跨分页导出或者批量删除,这是你会发现,当你选择后点击分页,发现之前选择的数据已经没有了,现在就是要满足分页点击分页后原始数据保留 <template> <div> <el-table :data="tableData" tooltip-effect="dark" style="width: 100

  • 在vue和element-ui的table中实现分页复选功能

    背景 后台管理系统中,使用表格展示数据时,可能的需求是多项选择然后进行批量操作,也期望能翻页多选. 实现 页面结构如下 <el-table class="table" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" ref="asTable" > <el-table

随机推荐