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代表选中的那一行数据,最后功能实现

你可能感兴趣的:(vue table表格点击选择中某一行数据并将其赋值到对应的input框中)