当前位置: 首页 > article >正文

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

实现的效果:点击表格行,前面的radio框实现勾选
在这里插入图片描述
代码

      <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上新加的一个属性,目的是实现单选框的勾选状态。
表格

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

事件

/** 单选表格 */
const handleTableChange =(cur,old)=>{
  cur.isChecked=true
  if(old){
    old.isChecked = false
  }
}
/** 点击单元格 */
const handleCellClick = (cur)=>{
  cur.isChecked = true
}

http://www.kler.cn/a/402692.html

相关文章:

  • Spring Boot 3.x + OAuth 2.0:构建认证授权服务与资源服务器
  • 问:Spring Boot应用监控组件工具,梳理一下?
  • Oracle 单实例、RAC 集群数据库修改 REDO 日志组
  • ETAS工具导入DBC生成Com协议栈
  • 递归算法专题一>Pow(x, n)
  • 【v5lite】调用onnx推理
  • 人形机器人开发、XR仿真训练、影视动画制作,一副手套支持多种应用
  • 安装CLIP
  • 前端项目支持tailwindcss写样式
  • 【Linux】编译器gcc/g++、动静态库
  • docker pull命令拉取镜像失败的解决方案
  • 机器学习笔记——聚类算法(Kmeans、GMM-使用EM优化)
  • ansible从入门到精通(完整篇)
  • 软件测试 —— 自动化基础
  • opencv项目:自动评分答题卡识别系统
  • layui合并table相同内的行
  • web——sqliabs靶场——第十三关——报错注入+布尔盲注
  • 告别反馈滞后!看板管理让UX设计流程更流畅
  • 208.实现前缀树 207.课程表
  • 22.UE5控件切换器,存档列表,
  • aws上安装ssm-agent
  • 16:00面试,16:06就出来了,问的问题有点变态。。。
  • 【蓝桥杯C/C++】翻转游戏:多种实现与解法解析
  • 【云原生开发】K8S集群调度资源deployment,daemonset,statefulset,cronjob,节点管理等开发设计与实现
  • 开源模型应用落地-Qwen2.5-7B-Instruct与vllm实现离线推理-性能分析(四)
  • C++游戏开发面试题及参考答案