vue table表格点击选择中某一行数据并将其赋值到对应的input框中

查阅elementUI参考文档可以发现table组件中有个 highlight-current-row 可以实现单选功能，同时通过@ row-click 事件来管理点击触发事件

给el-table表格绑定事件和单选高亮属性，同时按照UI设计稿改下高亮行的背景颜色，这时又要用到我们的老朋友 ::v-deep 样式穿透

row-click里面有三个参数，row代表所在行的各个数据，我们通过自定义的 handleClick 事件可以进行传参赋值，先return定义cardInfoList，给初始值cardInfoList赋值数据

因为table表格和赋值的input框属于兄弟组件，所以需要$emit触发父组件方法同时传参到兄弟组件中的赋值input框方法中，如下图，table表格属于 reference 组件，input框属于 custom 组件，他们的父组件为 detail 组件

在input所属的子组件 custom 组件中定义一个方法 getReferenceList

val代表的就是入参，是一个数组，overclock下的属性绑定的就是各个input值

在父组件 detail 中定义绑在 reference 子组件上的 callback 方法，用来调取上文讲到的 custom 组件中的 getReferenceList（）方法

因为页面有按钮来判断按钮的显示隐藏使用的是 radio 组件判断，所以这时需要保证组件挂载完毕再进行接下来的 *** 作，所以此时我们用到了 this.$nextTick

最后我们在子组件 reference 中的 handleClick 方法下触发绑在身上的 callback 方法，同时传入 this.cardInfoList 代表选中的那一行数据，最后功能实现

一：首先 创建 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)

---