element table 单选按钮_vue + Element el-table表格里面使用单选radio按钮

今天再改bug的时候,孙子张口就来,便是一个需求,要在表格里面加单选radio按钮,将选中的数据内容传到另一页面展示. 顾名思义,只能单选某一条数据,于是就跑到element官网找路子,结果没有找到想要的.

有的只是多选框

话不多说,直接上干货

1:html代码

注意lable和model

@change.native="getTemplateRow(scope.$index,scope.row)" style="margin-left: 10px;"> 

width="180px">

{{scope.row.templateName}}

注意:

1.  为空，不加这个radio的label会显示index数字，注意从0开始的；radio会全选的问题是label相同导致的

2.如果你发现点击一个radio结果选中全部,那就看看你的lable的设置,建议默认为索引:label="scope.$index"

2:js代码片段

获取到所选的整行数据,需要某个值自己取就好了

//获取选中数据

getTemplateRow(index,row){

this.templateSelection = row;

},

OK,"孙子"提的需求完成一半了,希望可以帮到你们