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

Posted 2023-03-01

参考技术A 一：首先 创建 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-page.sync="currentPage" 不写这句 无效
<el-pagination
:current-page.sync="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)
this.currentPage = currentPage;
this.LastPageCount = currentPage
this.SetCreenRow(this.BaseInfoList[this.SelectDataIndex])


四：tableRowClassName（）方法，给EL-TABLE设置行号
tableRowClassName (row, rowIndex)
row.row_index = rowIndex;


五：行点击事件
BaseRowClick(row, column, event)
this.NowRowIndex = row.row_index;//记录点击行的行号
this.NowSelectNum = row.SuppliesNum//记录行数据中的一个唯一键 以便 绑定 记录的选中行
//记录点击行时的 纵轴滚动条位置
let vmEl = this. el
const scrollParent = vmEl.querySelector('.el-table__body-wrapper')
this.Nowscroll = scrollParent.scrollTop


六：刷新列表的方法 内 绑定 之前 选中的 页码 行 及 滚动条位置
//选中 之前记录的 分页页码
this.current_change(this.LastPageCount);

//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效
setTimeout(() =>
this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll
, 13)