el-table中使用el-radio

在使用el-table时,有时会需要使用单选功能,官方组件给出的方法是添加highlight-current-row属性即可实现单选功能,使用背景高亮来提示已选

<el-table ref="mainTable" :data="tableData1" row-key="id" highlight-current-row>
</el-table>

在这里插入图片描述
有时我们想要的功能是一行前边显示单选框,此时需要结合el-radio来使用:

<el-table ref="mainTable" :data="tableData1" row-key="id" @current-change="handleCurrentChange">
                <el-table-column align="center" width="40px">
                    <template slot-scope="scope">
                        <el-radio v-model="currentRow" :label="scope.row">&nbsp;</el-radio>
                        //或者是<el-radio v-model="currentRow" :label="scope.row"><i></i></el-radio>
                    </template>
                </el-table-column>
   </el-table>

在这里插入图片描述

el-radio中间添加 或者i标签是为了清除label显示

猜你喜欢

转载自blog.csdn.net/weixin_44845483/article/details/130105798