一：首先 創(chuàng)建 el-table
<el-table
ref="BaseTable"http://設置 ref屬性
:highlight-current-row="true"http://高光選中行
:current-row-key="NowRowIndex"http://行號
:row-class-name="tableRowClassName"http://裝載 EL-TABLE前執(zhí)行的 方法 會遍歷每一行 每一個單元格
@row-click="BaseRowClick">//添加行點擊事件
二：添加 分頁 組件 細節(jié)在于 :current-page.sync="currentPage" 不寫這句 無效
<el-pagination
:current-page.sync="currentPage"
layout="prev, pager, next"
@current-change="current_change"http://選中頁 改變事件
:total="total"http://總行數(shù)
:page-count="AllPageCount"http://總頁數(shù)
:page-size="pagesize"http://每頁顯示的行數(shù)
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//記錄行數(shù)據(jù)中的一個唯一鍵 以便 綁定 記錄的選中行
//記錄點擊行時的 縱軸滾動條位置
let vmEl = this.el
const scrollParent = vmEl.querySelector('.el-table__body-wrapper')
this.Nowscroll = scrollParent.scrollTop
}
六：刷新列表的方法 內(nèi) 綁定 之前 選中的 頁碼 行 及 滾動條位置
//選中 之前記錄的 分頁頁碼
this.current_change(this.LastPageCount);
//選中 之前記錄的 選中行
let NowIndex = 0;
for(let i=0;i<this.BaseInfoList.length;i++) {//this.BaseInfoList 是EL-TABLE 綁定 的數(shù)據(jù)源
if(this.BaseInfoList[i].SuppliesNum == this.NowSelectNum){//匹配選中行的唯一 鍵，以找到記錄的行號
NowIndex = i;
this.SelectDataIndex = i;
}
}
this.SetCreenRow(this.BaseInfoList[NowIndex])//設置 選中行
//設置 滾動條到之前記錄的位置 細節(jié)在于必須加 setTimeout 否則無效
setTimeout(() => {
this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll
}, 13)
