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

vue3表格使用Switch 开关

本示例基于vue3 + element-plus

注:表格数据返回状态值为0、1。开关使用 v-model="scope.row.state === '0'" 会报错

 

故需要对写法做些修改,效果图如下

 

<el-table-column prop="state" label="入学状态" width="180" align="center"><template #default="scope"><el-switch:model-value="scope.row.state === '0'"@update:modelValue="val => updateState(scope.row, val)":active-icon="Check" :inactive-icon="Close" /></template>
</el-table-column><script setup>const updateState = (row, newValue) => {row.state = newValue ? '0' : '1';console.log(`更新学生 ${row.id} 状态为: ${row.state}`);};</script>

http://www.xdnf.cn/news/11934.html

相关文章:

  • Linux 特殊权限位详解:SetUID, SetGID, Sticky Bit
  • 使用C51和RTX-51微型交通灯控制器
  • 一种基于Service自动生成Controller的实现
  • 1.springmvc基础入门(一)
  • 栈-20.有效的括号-力扣(LeetCode)
  • 《复制粘贴的奇迹:原型模式》
  • C++课设:学生成绩管理系统
  • 【Axure视频教程】下载和安装Axure汉化包
  • 什么是单光谱
  • Python学习(6) ----- Python2和Python3的区别
  • 嵌入式学习笔记 - freeRTOS任务设计要点
  • 树莓派系列教程第九弹:Cpolar内网穿透搭建NAS
  • H5项目实现图片压缩上传——2025-06-04
  • 无法通过windows功能控制面板自动安装或卸载windows server角色或功能
  • 低成本奶泡棒解决方案WD8001功能说明
  • Hadoop企业级高可用与自愈机制源码深度剖析
  • docker的基本命令
  • AI界面遭劫持:Open WebUI被滥用于挖矿程序与隐蔽AI恶意软件
  • 如何快速找出某表的重复记录 - 数据库专家面试指南
  • 【力扣】3403. 从盒子中找出字典序最大的字符串 I
  • 判断:有那种使用了局部变量的递归过程在转换成非递归过程时才必须使用栈
  • AI批改作文的软件推荐:提升写作效率的智能工具
  • 厂商与经销商供应链数据协同:策略、实践与深度价值挖掘
  • 在WPS中如何启用宏VBA wps.vba.exe下载和安装
  • 【JVM】Java类加载机制
  • Python 多进程编程全面学习指南
  • Unity 大型手游碰撞性能优化指南
  • Axure高保真LayUI框架 V2.6.8元件库
  • [蓝桥杯]卡片换位
  • Modbus转EtherNET IP网关开启节能改造新范式