Vue+ElementUI+Table实现表格初始化选中数据以及分页切换保留勾选数据

最新推荐文章于 2023-09-02 21:43:30 发布

子非鱼-汤斯维尔

最新推荐文章于 2023-09-02 21:43:30 发布

阅读量3.1k

点赞数

分类专栏： vue elementUI 文章标签： vue.js elementui js

本文链接：https://blog.csdn.net/weixin_44190511/article/details/129086536

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

elementUI

2 篇文章 0 订阅

订阅专栏

一、实现表格分页切换保留勾选数据

在< el-table/>中添加 row-key=“id”.
在< el-table-column type=“selection”/> 中添加:reserve-selection=“true”
即可实现表格分页切换保留勾选数据。

Table Attributes

row-key: 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function

Table-column Attributes

reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

 <el-table :data="item.tableData" 
 			:ref="item.paramsLocation"
             row-key="id"
            @selection-change="handleSelectionChange($event, item)" 
            border height="300px" 
            max-height="300px" 
            :header-cell-style="headerCellStyle">
            <el-table-column
              :reserve-selection="true"
              type="selection"
              align="center"
            />
            <template v-for="(v, i) in tableList">
              <el-table-column
                :key="i"
                align="center"
                :prop="v.prop"
                :label="v.label"
                :code="i"
                show-overflow-tooltip
              />
            </template>
</el-table>

二、初始化选中数据

用已保存的数据和查询的数据进行对比：如果相同，使用
this. $re f s . re f N am e . t o gg l e R o wS e l ec t i o n (i t e m 1, t r u e) 如： t hi s .$ refs[item.paramsLocation][0].toggleRowSelection(item1,true)
进行选中数据

//之前选中已经保存的数据
let lastSelectArray = []
if (this.selectConfigObj) {
  lastSelectArray = this.selectConfigObj[item.paramsLocation]
}
if (res.code === '000000' && res.data) {
   item.tableData = res.data.records
   item.size = res.data.size
   item.current = res.data.current
   item.total = res.data.total
   item.pages = res.data.pages
   if (item.tableData && item.tableData.length > 0) {
     item.tableData.forEach(item1 => {
      // 因为做了分页，当切换回到已经加载过得数据页面时，不能重复选中，否则会出现重复数据
       if (!(item.selectArray && item.selectArray.length > 0 
       && item.selectArray.filter(item2 => item2.id === item1.id).length > 0)) {
         let find = false
         lastSelectArray.forEach(item2 => {
           if (item1.id === item2.id) {
             find = true
           }
         })
         if (find) {
           this.$refs[item.paramsLocation][0].toggleRowSelection(item1, true)
         } else {
           this.$refs[item.paramsLocation][0].toggleRowSelection(item1, false)
         }
       }
     })
   }
   this.$forceUpdate()
 }