关于 VUE EL-TABLE 记录分页、记录选中行、记录滚动条光标

一：首先 创建 el-table

<el-table

ref="BaseTable"//设置 ref属性

:highlight-current-row="true"//高光选中行

:current-row-key="NowRowIndex"//行号

:row-class-name="tableRowClassName"//装载 EL-TABLE前执行的 方法 会遍历每一行 每一个单元格

@row-click="BaseRowClick">//添加行点击事件

二：添加 分页 组件 细节在于 :current-pagesync="currentPage" 不写这句 无效

<el-pagination

:current-pagesync="currentPage"

layout="prev, pager, next"

@current-change="current_change"//选中页 改变事件

:total="total"//总行数

:page-count="AllPageCount"//总页数

:page-size="pagesize"//每页显示的行数

background >

</el-pagination>

三：current_change（）选中页 改变事件 记录当前选中的行号

current_change:function(currentPage){

thiscurrentPage = currentPage;

thisLastPageCount = currentPage

thisSetCreenRow(thisBaseInfoList[thisSelectDataIndex])

}

四：tableRowClassName（）方法，给EL-TABLE设置行号

tableRowClassName ({row, rowIndex}) {

rowrow_index = rowIndex;

}

五：行点击事件

BaseRowClick(row, column, event){

thisNowRowIndex = rowrow_index;//记录点击行的行号

thisNowSelectNum = rowSuppliesNum//记录行数据中的一个唯一键 以便 绑定 记录的选中行

//记录点击行时的 纵轴滚动条位置

let vmEl = this el

const scrollParent = vmElquerySelector('el-table__body-wrapper')

thisNowscroll = scrollParentscrollTop

}

六：刷新列表的方法 内 绑定 之前 选中的 页码 行 及 滚动条位置

//选中 之前记录的 分页页码

thiscurrent_change(thisLastPageCount);

//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效

setTimeout(() => {

this$refsBaseTablebodyWrapperscrollTop = thisNowscroll

}, 13)

当我们数据过多时，就需要用到分页器，一般都是请求后端接口来实现，具体实现方法如下：

本案例用到vue3、composition_API、vuex、element-plus框架

分页器标签：里面有三个很重要的配置：current-page、page-size 、total

创建一个reactive对象用来保存分页数据，并负责将数据传给服务器

创建一个用来保存实现效果的方法,并交给vuex进行数据处理，这里用到的是

在vuex的逻辑实现

service中的逻辑

分页器功能实现完成

vue+element-ui分页功能

分页代码：

<el-pagination p=""> </el-pagination>

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="queryInfopagenum"

:page-sizes="[5, 10, 15, 20]"

:page-size="queryInfopagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

>

@size-change 绑定切换每页记录数事件

@current-change 切换页码事件

current-page当前页，传给后端

page-sizes 每页记录数数组

page-size：当前每页显示的记录数

layout:布局样式

total：总页数

配合后端接口完成

以上就是关于关于 VUE EL-TABLE 记录分页、记录选中行、记录滚动条光标全部的内容，包括:关于 VUE EL-TABLE 记录分页、记录选中行、记录滚动条光标、Vue3基于element-plus的分页器实现、vue+element-ui分页功能等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！