Vue项目开发中问题随笔:
业务逻辑是这样的,在iView的table组件数据列表每行添加单选按钮后要绑定ref操作,ref的名字是radio加入id,获取ref时发现的小问题。
下面贴出解决方法,记录一下
通过ivew的文档提供的方法,给Table 绑定点击行触发事件@on-row-click="rowClick"。
<Table ref="tableTitle" @on-row-click="rowClick" :columns="hotField" :data="hotProItem">
<template slot-scope="{ row, index }" slot="select">
<div :ref="`radio${row.id}`" ></div>
</template>
</Table>
最开始测试了下,能打印出来想要的ref名字,打印this.$refs也可以看见想要的名字
rowClick(rowItem){
const radioItem = `radio${ rowItem .id}`
console.log(radioItem);
console.log(this.$refs);
},
打印如下:
所以就天真的写上了console.log(this.$refs.radioItem),结果输出了undefined。
解决方法:
rowClick(rowItem){
console.log( this.$refs[`radio${rowItem.id}`] );
},
可以正常拿到了点击某行的那个ref了。