记录一下处理element table表格数据多选翻页回显实现

最新推荐文章于 2024-08-22 14:27:13 发布
原创 最新推荐文章于 2024-08-22 14:27:13 发布 · 675 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

本文介绍了如何在Vue.js中处理Element UI的表格数据，实现在多选和翻页后仍能回显已选择的表格行。关键点包括设置`row-key`属性，监听`@select`事件以及在接口查询或翻页时处理回显操作。

table表格数据多选回显实现

实现结果

在这里插入图片描述

HTML代码——截取

<div>
      <el-dialog title="新增" :visible.sync="dialogTableForAddProject" row-key="getRowKeys">
        <el-table :data="projectList" ref="projectTableRef" @select="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="项目名称/企业名称" align="center" prop="projectName" />
          <el-table-column label="申报年份" align="center" prop="baseYear" />
          <el-table-column label="区域" align="center" prop="belongToArea" />
        </el-table>
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" :current-page="queryProjectParams.current"
        :page-size="queryProjectParams.size" @size-change="sizeChangeOfProject" @current-change="currentChangeOfProject" :page-sizes="projectSize"
        :total="projectTotal">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableForAddProject = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableForAddProject = false">确 定</el-button>
      </div>
      </el-dialog>
    </div>

需要注意的几个点
① row-key=“getRowKeys” 必须要有
②@select=“handleSelectionChange” 处理选中数据的
③这里是在接口查询时进行勾选回显的，也可以在翻页时进行回显勾选处理

JS代码——截取

data() {
return {
    groupId:'', //接收路由参数
    
    dialogTableForAddProject:false,
    queryProjectParams:{
        groupId:'',// 项目组ID
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
    },//查询项目列表参数
    projectTotal:0, // 可新增项目数量总数
    projectSize: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    projectList:[], //项目数据
    allProjectIds:[], // 汇总总选择的项目ID
    pageProjectIds:[]  //当前页选择的项目ID

};
},
methods: {

    // 打开新增项目弹框
    
    openAddProjectDialog(){
      this.queryProjectParams.groupId = this.$route.query.groupId;
      this.getProjectList()
      this.dialogTableForAddProject = true
    },

    // 查询可新增项目列表参数
    getProjectList(){
      projectRelationPageList(this.queryProjectParams).then(response => {
          if(response.data.code=='0'){
            this.projectList = response.data.data.records
            this.projectTotal = response.data.data.total
            this.setCheckBox();
          }
        });
    },

    // 多选框选中数据
    handleSelectionChange(selection,row) {
      let selected = selection.length && selection.indexOf(row) !== -1
      if(!selected){
        // 取消勾选，剔除
        var i = this.allProjectIds.indexOf(row.instId);
        if(i > -1){
          this.allProjectIds.splice(i,1)
        }
        return;
      }
      this.pageProjectIds = selection.map(item => item.instId);
      // 将项目主键放入总数组中
      this.pageProjectIds.map(projectId => {
        if(this.allProjectIds.indexOf(projectId) == -1){
          this.allProjectIds.push(projectId)
        }
      });
      console.log('汇总===')
      console.log(this.allProjectIds)
      console.log('当前===')
      console.log(this.pageProjectIds)
    },


    //下面的方法是进行设置行标识key的方法
    getRowKeys(row) {
        return row.instId
    },
    // 回显选中数据
    setCheckBox(){
      if(this.projectList != null && this.projectList.length > 0 && this.allProjectIds.length > 0){
        this.allProjectIds.forEach((aId) => {
          this.$nextTick(() => {
            this.projectList.forEach((p) => {
            // 这里根据自己的字段进行判断
              if(aId === p.instId){
                this.$refs.projectTableRef.toggleRowSelection(p);
              }
            })
          })
        })
      }
    },

    sizeChangeOfProject(pageSize) {
     this.queryProjectParams.size = pageSize;
     this.getProjectList();
    },
    currentChangeOfProject(current) {
      this.queryProjectParams.current = current;
      this.getProjectList();
    },
}
上面是部分代码，这里是整个页面的代码（根据需要看这里的代码）
<template>
<div class="app-container">
    <div class="search-box">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="项目名称/企业名称" :label-width="formLabelWidth" prop="projectName">
          <el-input v-model="queryParams.projectName" placeholder="请输入项目名称/单位名称" style="width: 200px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="restSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-plus" size="small" plain @click="openAddProjectDialog()">新增</el-button>
    </div>
    <div class="content-box">
      <el-table border v-loading="loading" :data="list">
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="项目名称/企业名称" align="center" prop="projectName" />
        <el-table-column label="申报年份" align="center" prop="baseYear" />
        <el-table-column label="区域" align="center" prop="area" />
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
             <el-button type="text" icon="el-icon-view" @click="del(scope.row.baseId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total,sizes,prev, pager, next,jumper" :current-page="queryParams.current"
        :page-size="queryParams.size" @size-change="sizeChange" @current-change="currentChange" :page-sizes="size"
        :total="total">
      </el-pagination>
    </div>
    <!--右侧滑框 start-->
    <div>
      <el-dialog title="新增" :visible.sync="dialogTableForAddProject" row-key="getRowKeys">
        <el-table :data="projectList" ref="projectTableRef" @select="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="项目名称/企业名称" align="center" prop="projectName" />
          <el-table-column label="申报年份" align="center" prop="baseYear" />
          <el-table-column label="区域" align="center" prop="belongToArea" />
        </el-table>
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" :current-page="queryProjectParams.current"
        :page-size="queryProjectParams.size" @size-change="sizeChangeOfProject" @current-change="currentChangeOfProject" :page-sizes="projectSize"
        :total="projectTotal">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableForAddProject = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableForAddProject = false">确 定</el-button>
      </div>
      </el-dialog>
    </div>
    <!--右侧滑框 end-->
  </div>
</template>

<script>

import {groupProjectPageList, projectRelationPageList} from '@/api/projectGroup/group'

export default {
//import引入的组件
components: {},
data() {
return {
    groupId:'', //接收路由参数
    loading: false,
    rightEnter: false,
    formLabelWidth: '150px',
    queryParams:{
        groupId:'',// 项目组ID
        projectName:'',//项目名称 or 企业名称
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
    },//查询项目组内项目列表参数
    dto:{
        groupId:'',//项目组ID
        instIds:[] //选择的项目数组
    },//新增项目组参数
    list:[], //项目组数据
    total: 0, // 总页数
    size: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],

    dialogTableForAddProject:false,
    queryProjectParams:{
        groupId:'',// 项目组ID
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
    },//查询项目列表参数
    projectTotal:0, // 可新增项目数量总数
    projectSize: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    projectList:[], //项目数据
    allProjectIds:[], // 汇总总选择的项目ID
    pageProjectIds:[]  //当前页选择的项目ID

};
},

created() {
    this.groupId = this.$route.query.groupId;
    this.queryParams.groupId = this.$route.query.groupId;
    this.getList()
},
//方法集合
methods: {

    getList(){
        this.loading = true
        groupProjectPageList(this.queryParams).then(response => {
          console.log(response)
          if(response.data.code=='0'){
            this.list = response.data.data.records
            this.total = response.data.data.total
            this.loading = false  
          }
        });
    },

    // 打开新增项目弹框
    openAddProjectDialog(){
      this.queryProjectParams.groupId = this.$route.query.groupId;
      this.getProjectList()
      this.dialogTableForAddProject = true
    },

    // 查询可新增项目列表参数
    getProjectList(){
      projectRelationPageList(this.queryProjectParams).then(response => {
          if(response.data.code=='0'){
            this.projectList = response.data.data.records
            this.projectTotal = response.data.data.total
            this.setCheckBox();
          }
        });
    },

    // 多选框选中数据
    handleSelectionChange(selection,row) {
      let selected = selection.length && selection.indexOf(row) !== -1
      if(!selected){
        // 取消勾选，剔除
        var i = this.allProjectIds.indexOf(row.instId);
        if(i > -1){
          this.allProjectIds.splice(i,1)
        }
        return;
      }
      this.pageProjectIds = selection.map(item => item.instId);
      // 将项目主键放入总数组中
      this.pageProjectIds.map(projectId => {
        if(this.allProjectIds.indexOf(projectId) == -1){
          this.allProjectIds.push(projectId)
        }
      });
      console.log('汇总===')
      console.log(this.allProjectIds)
      console.log('当前===')
      console.log(this.pageProjectIds)
    },


    //下面的方法是进行设置行标识key的方法
    getRowKeys(row) {
        return row.instId
    },
    // 回显选中数据
    setCheckBox(){
      if(this.projectList != null && this.projectList.length > 0 && this.allProjectIds.length > 0){
        this.allProjectIds.forEach((aId) => {
          this.$nextTick(() => {
            this.projectList.forEach((p) => {
              if(aId === p.instId){
                this.$refs.projectTableRef.toggleRowSelection(p);
              }
            })
          })
        })
      }
    },


     // 删除项目组
    del(baseId){
        this.$confirm('确认删除该条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
        }).then(() => {
           del(baseId).then(response => {
            if(response.data.code=='0'){
                this.$message({
                    type: 'success',
                    message: '删除成功！'
                });  
                this.getList()
            }
            });
          
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });       
        });
    },

    // 清空筛选条件
    restSearch(){
        this.queryParams.projectName = '';
        this.getList()
    },
    //关闭详情
    closePop(event) {
      this.rightEnter = false;
      //this.getList(this.page);
    },

    sizeChange(pageSize) {
     this.queryParams.size = pageSize;
     this.getList();
    },
    currentChange(current) {
      this.queryParams.current = current;
      this.getList();
    },

    sizeChangeOfProject(pageSize) {
     this.queryProjectParams.size = pageSize;
     this.getProjectList();
    },
    currentChangeOfProject(current) {
      this.queryProjectParams.current = current;
      this.getProjectList();
    },

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
}
</script>
<style scoped>
.search-box {
  padding: 10px 20px;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
}

.app-container {
  background: #f0f0f0;
  min-height: 600px;
}

.content-box {
  padding: 10px 20px;
  background: #fff;
  padding-bottom: 30px;
}

.RightSlide {
  position: absolute;
  width: 80%;
  background-color: #fff !important;
  top: 0;
  right: 0;
  bottom: 5px;
  z-index: 10;
  -webkit-box-shadow: 0px 0px 6px #ddd;
  box-shadow: 0px 0px 6px #ddd;
}

.el-tabs {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.RightSlideBody .el-tabs__header {
  padding: 0 20px;
}

.RightSlideBody .el-tabs__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 41px;
  bottom: 0;
}

.scroll-bar::-webkit-scrollbar {
  width: 5px;
}

.scroll-bar::-webkit-scrollbar-thumb {
  width: 5px;
  height: 10px;
  border-radius: 20px;
  background: #ddd;
}

.content-box .el-pagination {
  text-align: right;
  padding: 25px 0 20px 20px;
}
</style>
<style>
.app-container .el-table thead tr th {
  color: #909399;
  font-weight: 500;
  background-color: #fafafa !important;
}
</style>
欢迎各位大佬指正！
Mr_SnakeZ
关注
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件 ＜el-table＞ 跨页后已前勾选的行自动消失问题）详细示例解决教程
🏆 前端领域优质创作者
03-02 1万+
vue3elementpuls表格跨页全选实现，vue3elementpuls表格,后端分页时,实现分页多选功能，elementpuls跨页多选，elementpuls表格跨分页多选及回显的实现示例，表格分页多选功能，vue3elementPlus设置表格跨页勾选，vue3Elementplus最新分页跨页全选操作(跨页记住已经勾选)，vue3elementplustable组件跨分页多选及回显，vue3elementplusel-table-columntype="se
Vue3+ElemenPlus table支持跨页多选
朝花夕拾的博客
06-09 589
删除数据时页面还是勾选状态 添加此方法。proxy为当前组件实例。
el-table 实现翻页多选
qq_42396813的博客
01-08 1233
el-table 实现翻页多选，保持选中状态
关于element 弹窗中使用表单回显的问题
QLP544134747的博客
04-15 2262
关于js的深拷贝
el-table分页多选及回显
四木的博客
05-13 6041
使用element的table组件完成表格的分页多选与数据回显
element ui table 多选+翻页 多选结果回显解决方案
m0_46098807的博客
08-22 302
element table 翻页+多选时，回显选中的状态
列表多选字典回显
06-23
在多选列表中实现字典数据的回显功能，需要结合前端框架（如 Vue.js 和 Element-UI）的功能特性来完成。以下是具体实现方法： #### 1. 数据字典的绑定 首先，在 `el-select` 组件中绑定字典数据时，需要确保字典...
vue element表格支持跨页多选并且反显选中
weixin_43366084的博客
02-17 1966
vue项目使用element的el-table实现表格的跨页多选以及数据反显选中
我现在有一个需求 就是 我使用el-table做分页多选 我新增时候可以进行分页多选 并且保持分页多选的状态 然后我编辑时候我分页多选可以正常回显
最新发布
08-15
我们使用Element UI的el-table组件实现分页多选，并且要求新增和编辑时都能保持分页多选状态（跨页选择），编辑时能正确回显已选项。 关键点： 1. 使用el-table的type="selection"列，并设置reserve-selection属性...
elmentplus获取表格多选的数据
07-09
在 Element Plus 的 `el-table` 组件中，实现多选并获取选中数据的核心在于绑定 `@selection-change` 事件，并通过 `ref` 操作表格实例来获取或操作选中的行数据。 ### 基本实现方式 在 Vue 3（组合式 API）中，...
Element table 翻页多选
weixin_30824479的博客
04-04 775
需求： 列表页面导出excel数据，需要支持多页导出 思路如下: 1 所有选中的数据存到一个数组中selectDataArrL 2 切换currentPage(页码) 或pageSize(条数) 的时候 给当前数据添加选中状态this.$refs.multipleTable.toggleRowSelection() 3 整理需要导出的数据 实现步骤: 1. 存储选中的内容 ...
el-table（type=“selection“）多选框两种回显
热门推荐
qq_50276105的博客
01-06 2万+
2、数据库数据回显，调用this.$refs.multipleTable.toggleRowSelection(row, true)方法的时候，必须实在el-table挂在完成之后才会起作用，因此eement ui的在页面中使用this.$refs.multipleTable.toggleRowSelection(row, true)，是通过添加点击事件来实现的。因此，我称之为页面间数据的回显。被选择的el-table多选框行数据，以此显示在另一张页面上，类似v-model，实时展示。
elementuiplus的多选表格 回显以及分页保存之前选择
qq_57952018的博客
11-14 1400
最近在做elementui的多选表格回显表格和保持之前选择。记录下。
element table 多选 翻页 选中记忆
08-15 904
select(selection, row) { let existence = false; // 选中数组中是否存在该row for (let i = 0; i < selection.length; i++) { if (selection[i]....
element ui中 ：1、 table 多选，可以实现翻页多选；选项限制条件，是否可以选择：:selectable 2、table翻页 序号
shencailing的博客
05-17 730
table 多选，可以实现翻页多选一、element ui 官网地址二、自己项目代码实现2.1 `:row-key="getRowKeys"` 要写2.2 ` :reserve-selection="true"` 写上2.3 `:selectable="checkCpMoreSelectable"`控制当前行是不是可以选2.4 注意 清选中的样式表格代码： 一、element ui 官网地址 参考地址 二、自己项目代码实现 2.1 :row-key="getRowKeys" 要写 //渲染
Element-UI el-table 多选，多选数据删除后数据回显
qq_32849999的博客
02-05 2381
详情图：选择药品-》删除已选择药品 <template> <div> <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible=true">选择药品</el-button> <el-dialog title="选择药品" :vi...
element组件库表单数据的校验回显以及再次打开校验信息还显示（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
04-12 889
element组件库表单数据的校验回显在关闭之后没有重置并且再次打开表单之后还显示校验信息。
element-UI表格中多选框回显默认选中
weixin_65120845的博客
05-27 1607
首先举例进行分析。我这块是有检查项，检查组，套餐等，一个检查组包括多个检查项，一个套餐又包括多个检查组，在做检查组和套餐的修改时，需要对所包含的多个检查项或者多个检查组进行数据回显再进行修改，如下图所示： 以检查组的回显为例进行说明： 需要通过检查组的id包含的检查项的id，这个是后端接口实现的，定义一个数组保存该id，然后具体实现如图： arr是保存了所有检查项的数组，也就是上图中检查项信息中的数据，通过循环，判断两个id是否相同 相同则选中，即实现了回显。 需要注意的是该方法..
vue elementui el-table 多选 回显
qq_58340302的博客
04-19 2816
// tableData是所有的数据 // checkl是需要选中的数据 // id是每条数据的唯一值 this.tableData.forEach(row => { this.checkl?.forEach(rows => { if (row.id === rows.id) { this.$refs.multipleTable.toggleRowSelection(row, true) } }) }) 如果要实现分页多选，保持数据的选中状态 给e...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值