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
}
相关推荐
曲意已决9 分钟前
《深入源码理解webpac构建流程》
前端·javascript
去伪存真19 分钟前
前端如何让一套构建产物,可以部署多个环境?
前端
CC__xy23 分钟前
04 类型别名type + 检测数据类型(typeof+instanceof) + 空安全+剩余和展开(运算符 ...)简单类型和复杂类型 + 模块化
开发语言·javascript·harmonyos·鸿蒙
KubeSphere24 分钟前
EdgeWize v3.1.1 边缘 AI 网关功能深度解析:打造企业级边缘智能新体验
前端
小奋斗28 分钟前
深入浅出:ES5/ES6+数组扁平化详解
javascript·面试
掘金安东尼36 分钟前
解读 hidden=until-found 属性
前端·javascript·面试
1024小神1 小时前
jsPDF 不同屏幕尺寸 生成的pdf不一致,怎么解决
前端·javascript
滕本尊1 小时前
构建可扩展的 DSL 驱动前端框架:从 CRUD 到领域模型的跃迁
前端·全栈
借月1 小时前
高德地图绘制工具全解析:线路、矩形、圆形、多边形绘制与编辑指南 🗺️✏️
前端·vue.js
li理1 小时前
NavPathStack 是鸿蒙 Navigation 路由的核心控制器
前端