感谢小姐姐的帮助,今天顺利解决之前一个问题:利用el-table 实现翻页之后 数据的 状态保持。
一直想着如何保持状态和进行去重,结果人家自带了相应的方法,官方描述如下,其实看了还是有些不太明白。还好有小姐姐的相助,哈哈,轻松解决。
row-key/reserve-selection 的配合使用
代码如下:
<div>
<el-table :data="tableData" @selection-change="select_row" :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column :label="languages.project_manage.index.res_region" prop="resource_region"></el-table-column>
</el-table>
</div>
然后可以实现数据翻页之后的状态保存。
数据获取之后,要将保存的数据进行分页展示:此处只是纯前端的数据处理
el-tooltip 鼠标划过之后的提示内容设置
<el-tooltip class="item" effect="dark" :content="languages.project_manage.resource_manage.show_select_resources" placement="top-start">
<span
class="show_select_resource"
@click="show_drawer"
type="primary"
style="margin-right: 16px">
<span class="el-icon-s-fold"></span>
</span>
</el-tooltip>
数据分页展示:
<el-pagination
@current-change="dr_handleCurrentChange"
:current-page.sync="dr_page_index"
:page-size="dr_page_size"
:prev-text='languages.common.pagination.prev'
:next-text='languages.common.pagination.next'
layout="prev, pager, next, jumper"
:total="dr_total_records">
</el-pagination>
vue 观察数组的变异方法 更新视图
- push()
- pop()-----删除并返回数组的最后一个元素
- shift()-----用于把数组的第一个元素从其中删除,并返回第一个元素的值
- unshift()-----向数组的头部 添加若干元素,并返回 数组的 新长度;
- splice(i,n,arr)
- sort(xx)
- reverse()
有些方法不会改变数组,vue 不能检测到数组变化,不能触发视图更新:
- filter()
- concat()-----用于连接两个或多个数组
- slice()-----从已有的数组中返回选定的元素
切换页码之后的数据展示,slice的使用,视图没有更新,使用this.$set(this.new_data)
刷新视图
dr_handleCurrentChange(){
let page = this.dr_page_index
this.new_data = this.drawertableData.slice((page-1)*this.dr_page_size,page*this.dr_page_size)
this.$set(this.new_data)
},
drawer 抽屉设置
show_drawer(){
this.drawer = true
this.dr_total_records = this.drawertableData.length
this.dr_page_total = Math.ceil(this.dr_total_records / this.dr_page_size)
this.dr_handleCurrentChange()
},
最终效果: