一：首先 创建 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);
//选中 之前记录的 选中行
let NowIndex = 0;
for(let i=0;i<this.BaseInfoList.length;i++) {//this.BaseInfoList 是EL-TABLE 绑定 的数据源
if(this.BaseInfoList[i].SuppliesNum == this.NowSelectNum){//匹配选中行的唯一 键，以找到记录的行号
NowIndex = i;
this.SelectDataIndex = i;
}
}
this.SetCreenRow(this.BaseInfoList[NowIndex])//设置 选中行
//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效
setTimeout(() => {
this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll
}, 13)
