elementUI 表格组件结合单选框做单选效果显示

实现的效果:点击表格行,前面的radio框实现勾选

代码

javascript 复制代码
      <el-table-column align="center" label="选择" width="70">
        <template #default="scope">
          <el-radio-group v-model="scope.row.isChecked">
            <el-radio :value="true"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>

value值一定要绑定一个bool值,且为真,isChecked是row上新加的一个属性,目的是实现单选框的勾选状态。

表格

javascript 复制代码
    <el-table :data="apiTableData" 
       style="width: 100%" 
       highlight-current-row
       @current-change="handleTableChange"
       @cell-click="handleCellClick"
       border>

事件

javascript 复制代码
/** 单选表格 */
const handleTableChange =(cur,old)=>{
  cur.isChecked=true
  if(old){
    old.isChecked = false
  }
}
/** 点击单元格 */
const handleCellClick = (cur)=>{
  cur.isChecked = true
}
相关推荐
Felicity_Gao1 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货2 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~3 小时前
前端三剑客之一 HTML~
前端·html
lang201509283 小时前
Spring远程调用与Web服务全解析
java·前端·spring
孤狼warrior5 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉5 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5205 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木6 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost6 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求