今天再改bug的时候,孙子张口就来,便是一个需求,要在表格里面加单选radio按钮,将选中的数据内容传到另一页面展示. 顾名思义,只能单选某一条数据,于是就跑到element官网找路子,结果没有找到想要的.
话不多说,直接上干货
1:html代码
<el-table :data="list" border tooltip-effect="dark" element-loading-text="拼命加载中" ref="multipleTable" style="width: 100%" max-height="400">
<el-table-column label="选择" width="60px" align="center" header-align="center">
<template slot-scope="scope">
<el-radio :label="scope.$index" v-model="templateRadio"
@change.native="getTemplateRow(scope.$index,scope.row)" style="margin-left: 10px;"> </el-radio>
</template>
</el-table-column>
<el-table-column label="模板名称" align="center" header-align="center" show-overflow-tooltip
width="180px">
<template slot-scope="scope">
{{scope.row.templateName}}
</template>
</el-table-column>
</el-table>
注意:
1. 为空，不加这个radio的label会显示index数字，注意从0开始的；radio会全选的问题是label相同导致的
2.如果你发现点击一个radio结果选中全部,那就看看你的lable的设置,建议默认为索引:label="scope.$index"
2:js代码片段
//获取选中数据
getTemplateRow(index,row){
this.templateSelection = row;
},
OK,"孙子"提的需求完成一半了,希望可以帮到你们
