elementUI表格设置单选框

最新推荐文章于 2024-08-19 13:13:23 发布

渴望进步的小白

最新推荐文章于 2024-08-19 13:13:23 发布

阅读量2.3k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45747619/article/details/109217000

版权

这篇博客介绍了如何在ElementUI的表格组件中设置单选框，以实现单选功能。通过使用<el-radio>组件，并结合v-model和label属性，解决了点击一行时可能多选的问题。关键代码示例展示了如何绑定change事件来获取选中行的数据，确保每次只能选择一行。

摘要由CSDN通过智能技术生成

elementUI表格设置单选框

在这里插入图片描述
如果这种情况

<el-radio v-model="templateRadio" :label="scope.$index" @change.native="getTemplateRow(scope.row)"></el-radio>

在这里插入图片描述

注意：只显示单选框，{{""}}必不可少， :label="scope.$index"解决点一次多个选中的问题

		<el-table
          :data="evaluteList"
          border
          size="mini">
          <el-table-column width="80" align="center" label="选择">
            <template scope="scope">
              <el-radio v-model="templateRadio" :label="scope.$index" @change.native="getTemplateRow(scope.row)">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            show-overflow-tooltip
            label="方案名称" width="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="baseStationName"
            show-overflow-tooltip
            label="上行速率下降程度" width="140"
            align="center">
          </el-table-column>
        </el-table>