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

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

有的只是多选框

话不多说,直接上干货

1:html代码

注意lable和model

<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;">&nbsp;</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.&nbsp; 为空，不加这个radio的label会显示index数字，注意从0开始的；radio会全选的问题是label相同导致的

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

2:js代码片段

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

//获取选中数据

            getTemplateRow(index,row){                               

                this.templateSelection = row;

            },

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