Element复选框编辑回显问题

最新推荐文章于 2024-02-02 09:58:13 发布
最新推荐文章于 2024-02-02 09:58:13 发布
阅读量2.1k 收藏 9
点赞数
分类专栏： UI框架功能实现 项目效果实现 文章标签： vue checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HEWNCP/article/details/108628396
版权
本文记录了在Vue项目中，使用Element UI处理复选框编辑回显时遇到的问题及解决方案。由于后端返回的数据格式与Element UI官方示例不同，导致回显时出现困扰。通过将数据转换并利用v-model的特殊处理，成功实现了复选框的回显。同时，还介绍了如何设置已选中项为不可编辑状态，以及新增功能的实现思路。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于项目需要，碰到复选框编辑回显问题，因为数据格式与官网格式不同，所以试了许多次未果，百度上的答案也千奇百怪，后来经过公司大佬点拨实现了功能，所以记录一下，希望可以帮助同样遇到坑的朋友。

图中数据为表中点击某一行的传入编辑页中的数据

这是我根据后端返参类型写的假数据
这是我根据后端返参类型写的假数据
因为element中直接使用字符串与项目数据不同，将数据改为对象回显时走了许多坑

图中ckecks为当前复选框中所有数据，label指向id值，key值为下标
disabled因为我项目中回显后选中不可编辑，如果没用这种效果可不写input框是动态新增，也可忽略
在这里插入图片描述
重点主要是在v-model这块，因为官网中选中值是数组内字符串，按照我的数据格式直接将对象传过去不会显示，所以在这块需要便利选中的值将id值push进入v-model对应的值中，注意id值为字符串（这块也是一个坑）

在这里插入图片描述

最低0.47元/天 解锁文章
ElementUi Table复选框回显
韩旭不会敲代码吧的博客
06-03 935
ElementUi Table复选框回显
折线迷你图怎么设置_30.12 迷你图
weixin_33431149的博客
12-30 4516
迷你图是显示在单个单元格中的一个小图表。使用迷你图与传统图表的最大的区别为迷你图较为简洁，它没有坐标轴、标题、图例、数据标签等图表元素，使用迷你图主要展示数据的大小比较和变化趋势，Excel2019提供了3种常用的迷你图类型：折线迷你图、柱形迷你图、盈亏迷你图。30.12.1 创建迷你图图 30‑118展示是各城市一至六月销售数据表，现需要创建迷你图展示一至六月销售量比较。选择H2:H4单元格区域...
折线迷你图怎么设置_Excel如何制作小微型的迷你图?
weixin_39811842的博客
02-05 1117
【Excel如何制作小微型的迷你图?】谢谢邀请。我是汤帅，一个PPT自由设计师，承接PPT定制。看着歪果仁的Excel展示都是很高大上，特别是他们设计的数据与图表恰到好处，其实最终能总结的一个原因就是走心。我们既是数据的处理者，也是数据的展示者，对于我们处理而言是不需要对数据格式进行过多的处理，只求准确、准确、准确。但是展示就需要吸引观看者的眼球，起到可视状态。这里有一个Excel2010版新功能...
Element-ui框架checkbox复选框全选加回显功能
靓仔豪吖的博客
04-23 1995
Element-ui框架checkbox复选框全选加回显功能 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox> <el-checkbox-group v-model="checkedCities" @c
elementui checkbox使用 以及结合后台 回显
一株木樨的博客
01-18 3507
页面： 前端： <el-col :span="24"> <el-form-item label="办公环境" prop="officeEnvironment"> <el-checkbox-group v-model="form.officeEnvironment"> <el-checkbox v-for="(item,index) in officeEnvironmentLis
VUE+Layui 复选框：回显、禁用效果
夏已微凉、
07-18 945
VUE+Layui 复选框：回显、禁用效果
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
vue3 element-plus复选框分页回显
最新发布
01-18
### Vue3 Element Plus 复选框分页回显解决方案 在处理 `Vue3` 和 `Element Plus` 的表格组件时，为了实现在分页切换后保持已选择项的状态，可以采用以下方案： #### 数据结构设计 确保数据模型能够保存每一页的...
关于ElementUI的CheckBox多选框数据回显
JackMa的博客
12-23 6336
获取的数据值进行匹配，如果相同就会数据回显，显示已选。因为ElementUI已经封装好了，会自动匹配。数据需要和label标签值相同才能数据回显。例如上图，需要回显已选的数据。点击分配，则会显示回显的数据。
elememt ui 表格复选框回显
wgb0409的博客
12-17 572
<el-table ref="table" :data="tableData" :row-key="getRowKey"> <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column> </el-table> getRowKey(row) { return row.id; }, //获取到...
elementUI表格复选框进行数据回显
做一个有知识的流氓
04-23 8947
【代码】elementUI表格复选框进行数据回显。
element ui Select 选择器编辑回显问题
Yangpengxunb的博客
02-22 1072
element ui Select 选择器编辑回显问题
折线迷你图怎么设置_Excel2013如何使用迷你图展示数据？
weixin_39706127的博客
12-19 1416
数据条主要是应用于一条数据的展示的，如果大家有多组数据需要展示，那么，试试迷你图吧。今天，我们就来学习怎么在Excel2013中使用迷你图。具体做法如下：1、用Excel2013打开含有几组数据的工作表，如下图所示，我们现在在E列做出B、C、D列中三组数据的迷你图。选中B3至D3单元格，切换到“插入”选项卡，大家在“迷你图”组中选择一个自己需要的迷你图样式，我们这里以“折线图”为例。2、此时会弹出...
element 实现多个循环出来的复选框，以及回显
wqnmlgbsz的博客
09-11 6058
1.效果图如上 下面是demo1，点击aaaa 所有rule里面的链接 放到一个数组里面 <style scoped> </style> <template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="item in ci...
elementui中el-table中selection框选中的回显（带有expand的table）
qq_45750213的博客
01-17 2844
el-table-column show-overflow-tooltip prop="chemicalName align="center label="化 学品名称">//toggleRowExpansion展开扩展按钮，展开后会调用handleExpandChange方法。选中的项自动展开，点击新增按钮打开dialog并进行选中项的展开和选中回显。-- 表格数据的分页的功能 -->//chooseData可选的列表数据。//tableData选中项集合。// 备份一下选中数据。
el-dialog + el-table 复选框回显
2301_76861208的博客
02-02 829
在 Element UI 的 el-dialog 中，想要实现 el-table 的复选框回显（即在对话框打开时显示之前已经选中的项），需要在对话框打开之前保存选中的状态，并在打开对话框时根据这些状态来设置复选框的选中状态。
element el-checkbox-group 多选回显
weixin_43962877的博客
09-05 859
因为ElementUI已经封装好了，会自动匹配el-checkbox-group中v-model的数据和el-checkbox中v-for获取的数据值进行匹配，如果相同就会数据回显，显示已选。在el-checkbox-group的v-model数据需要和label标签值相同才能数据回显。
vue+elementUI 使用单选框和复选框时获取数据不回显问题
龚箭的博客
10-23 4551
场景: 使用elementUI单选框和复选框,动态循环渲染数据时,选中数据无法回显到页面. 原因： 因为Vue的数据劫持机制 解决方案一 尽量避免对data(){return { }}里的数据进行频繁赋值. 尽量避免嵌套方式赋值. <div v-for="(tiem,index) in Data" :key="index" class=""> <div&...
前端Element多选框的切换页面回显以及各种功能
m0_59866374的博客
08-04 449
/el-table-column> console.log('当前选择项===》', arr, row, this.studentrk);}) //循环选中的每一行拿到index。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值