Element UI 前端实现分页 --el-pagination

感谢小姐姐的帮助,今天顺利解决之前一个问题:利用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()
 },

最终效果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37304462/article/details/111770735
今日推荐