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

news/2024/11/25 8:11:32/

实现的效果:点击表格行,前面的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=trueif(old){old.isChecked = false}
}
/** 点击单元格 */
const handleCellClick = (cur)=>{cur.isChecked = true
}

http://www.ppmy.cn/news/1548724.html

相关文章

YOLO11改进 | 模块缝合 | C3k2融合多尺度表征学习模块 【两种改进】

秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 本文给大家带来的教程是将YOLO11的C3k2替换为融合结构来提取特征。文章在介绍主要的原理后,将手把手教学如何进行模块的…

状态模式之状态机

状态机的背景 在软件开发过程中&#xff0c;尤其是涉及到复杂的系统行为控制时&#xff0c;我们常常会遇到这样的情况&#xff1a;一个对象或者系统会在多种状态之间进行转换&#xff0c;并且在不同状态下对相同事件的响应是不同的。 以自动售卖机为例&#xff0c;自动售卖机…

DataGear 5.2.0 发布,数据可视化分析平台

DataGear 企业版 1.3.0 已发布&#xff0c;欢迎体验&#xff01; http://datagear.tech/pro/ DataGear 5.2.0 发布&#xff0c;图表插件支持定义依赖库、严重 BUG 修复、功能改进、安全增强&#xff0c;具体更新内容如下&#xff1a; 重构&#xff1a;各模块管理功能访问路径…

GDPU 信息安全 期末复习

文章目录 第一章 绪论✅ 单选题✅ 简答题6. 假定你是单位的安全主管&#xff0c;为了提高单位的网络安全性&#xff0c;在制定单位的安全保障方案时&#xff0c;有哪些措施&#xff08;包括技术和非技术的&#xff09;&#xff1f;9. 有人说只要我有足够多的钱&#xff0c;就可…

nodejs21: 快速构建自定义设计样式Tailwind CSS

Tailwind CSS 是一个功能强大的低级 CSS 框架&#xff0c;只需书写 HTML 代码&#xff0c;无需书写 CSS&#xff0c;即可快速构建美观的网站。 1. 安装 Tailwind CSS React 项目中安装 Tailwind CSS&#xff1a; 1.1 安装 Tailwind CSS 和相关依赖 安装 Tailwind CSS: npm…

C++——智能指针剖析

参考&#xff1a; 恋恋风辰官方博客 动态内存管理 - cppreference.com SRombauts/shared_ptr&#xff1a; 一个最小的 shared/unique_ptr 实现&#xff0c;用于处理 boost/std&#xff1a;&#xff1a;shared/unique_ptr 不可用的情况。 C智能指针_c 智能指针-CSDN博客 当…

21.UE5游戏存档,读档,函数库

2-23 游戏存档、读档、函数库_哔哩哔哩_bilibili 目录 1.存档蓝图 2.函数库 2.1保存存档 2.2读取存档&#xff1a; 3.加载游戏&#xff0c;保存游戏 3.1游戏实例对象 3.2 加载游戏 3.3保存游戏 这一节的内容较为错综复杂&#xff0c;中间没有运行程序进行阶段性成果的验…

深入理解C++11右值引用与移动语义:高效编程的基石

文章目录 前言&#x1f4da;一、C11的历史发展&#x1f4d6;1.1 C11 之前的背景&#x1f4d6;1.2 C11 的发展历程&#x1f4d6;1.3 C11 的主要设计目标&#x1f4d6;1.4 C11 的主要特性&#x1f4d6;1.5 C11 的影响 &#x1f4da;二、统一的列表初始化&#x1f4d6;2.1 基本列表…