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

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

在< 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. r e f s . r e f N a m e . t o g g l e R o w S e l e c t i o n ( i t e m 1 , t r u e ) 如: t h i s . refs.refName.toggleRowSelection(item1,true) 如:this. refs.refName.toggleRowSelection(item1,true)如:this.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()
 } 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Element UI的静态数据分页,你可以按照以下步骤操作: 1. 创建一个包含所有数据的数组,这将作为你的静态数据源。 2. 在页面中使用`<el-table>`组件展示数据,并设置`data`属性为你的数据数组。 3. 使用`<el-pagination>`组件创建分页器。设置`total`属性为数据数组的长度,表示总条目数。 4. 在分页器中绑定一个变量,例如`currentPage`,表示当前页数。 5. 使用计算属性来实现分页功能。根据`currentPage`和每页显示的条目数,使用`Array.slice()`方法从数据数组中截取对应的数据,并将截取后的数据作为表格数据源。 6. 当用户点击分页器中的页码时,更新`currentPage`的值,从而触发计算属性重新计算并更新表格数据。 以下是一个简单示例代码: ```vue <template> <div> <el-table :data="paginatedData"> <!-- 表格列定义 --> </el-table> <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" :total="data.length" ></el-pagination> </div> </template> <script> export default { data() { return { data: [], // 所有数据 currentPage: 1, // 当前页数 pageSize: 10, // 每页显示条目数 }; }, computed: { paginatedData() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.data.slice(startIndex, endIndex); }, }, methods: { handlePageChange(page) { this.currentPage = page; }, }, }; </script> ``` 请根据你的具体业务需求修改和完善上述代码。希望能对你有所帮助!如有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值