关于我在nuxt+vue3+elementPlus使用Select 选择器数据出乱的时候

最新推荐文章于 2025-01-07 14:49:20 发布
最新推荐文章于 2025-01-07 14:49:20 发布
阅读量479 收藏
点赞数
分类专栏： 笔记 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51357044/article/details/127023830
版权
在构建大型系统过程中，遇到编辑页面的数据混乱问题。起初怀疑是v-model绑定重复导致，但检查后排除了这个可能性。经过深入排查，最终找到了问题的根源并成功修复，使数据不再串通。这是一个关于Vue.js应用调试和问题解决的经验分享。

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

近期写了要写一个超大的系统-写到编辑信息页时候发现如下情况：
在这里插入图片描述
在这里插入图片描述
数据出乱了？？？？？？？？？？？？？？？？？？？？？？？？？？？以前也没有出现过啊，这个问题好冷门啊，刚开始我也是以为绑了相同v-model，结果一看
在这里插入图片描述
在这里插入图片描述
这他妈也不搭边啊
在这里插入图片描述
于是我各种百度都是说可能绑定了相同的v-model。我说了不同结果都不知道了，我就很纳闷，然后意外的解决了。
给你们看看罪魁祸首
在这里插入图片描述
修改后的样子
在这里插入图片描述
在这里插入图片描述
好了数据不在串通了
在这里插入图片描述

Vue3 - Ant Design Vue 选择器 a-select 同时支持 “下拉选择和手动输入“，既能下拉框选择又可以像 input 一样输入文字内容，让 Select选择器组件能选也能输入文字
王二红
07-03 3455
vue3，ant-design-vue，select选择器，a-select，实现可下拉选择和手动输入，antd组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，可选择可以手动输入，Vue3使用a-select下拉框实现可输入可选择，可新增输入可选择，vue3使用Antdesignvue4.x选择器Select既可以下拉选择也可以手动输入，可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入框功能，最新教程，vue3中Antd如何做到下拉框既有select功能也有inpu
Vue - Ant Design Vue 中 ＜a-select＞ 选择器组件，既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
热门推荐
王二红
12-22 2万+
ant组件库的选择器怎么既能选，又能像文本框一样输入。antd-vue的select组件实现既可以输入添加,又可以下拉选择。antdesignselect可输入可选择，既可以输入又可以选择得框，如何实现ant选择器能选择项目还能直接输入文本内容，ant-design-vue中的select选择器,对输入值的进行筛选操作，vue，antdesignvue，select选择器，a-select，a-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可
el-select 默认样式错乱解决办法
qdd000的专栏
10-25 1036
在用 Vue 框架写前端代码的时候，使用了element-ui 版本是2.15.14用到了组件，按照示例添加 el-select，页面显示错乱。
Nuxt3 安装element plus, Hydration completed but contains mismatches报错,Failed to resolve component警告，解决
m0_67755668的博客
08-15 1017
Nuxt3 安装element plus，Hydration completed but contains mismatches报错，警告，页面中使用element plus 组件需要在组件外包一层
vue element table 切换 数据错乱问题
阿妖的博客
11-16 2567
当多个table 使用v-if切换显示时. 并且表格的长短不一的情况下, 切换表格会出现排版和数据错乱 解决办法: 在对应的table 加上 key 属性就可以了. 还有一种情况是, 表格只有一个 但需要动态的改变数据, 就可能需要用到doLayout 方法 具体使用看element 官网的table项 ...
【vue笔记】el-table中嵌套的el-select 的取值问题
qyq7777的博客
08-23 3059
前言 最近开始在公司实习，想记录一下自己遇到的一些问题和解决办法，不一定完全正确，还在学习中……如果有错误，欢迎批评指正，谢谢。 原型的要求是table中每一行都有一个select，且每一个select之间互不干扰 vue代码如下： 细节 【使用slot-scope=“scope”】 element-ui的官方解释是： 也就是说使用<template scope="scope">后，通过scope.row.键名，可以获取所在行的某一列...
element Select 选择器下拉框位置 跑了
m0_46115011的博客
02-19 3092
第一种： 使用 popper-class 属性 注意：style中需要去掉 scoped！！！ 否则无效 第二种：可以用:popper-append-to-body="false"属性+ Css/deep/ el-select-dropdown /deep/ .el-select-dropdown { width: 100% !important; border: 2px solid #6db8f9; background: #06284b; } 注意： ...
前端实战：Vue3+ElementPlus+ECharts实现后台管理系统
最新发布
qq_22910257的博客
01-07 1640
本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。
Vue3 - Element Plus 报错 Uncaught (in promise) TypeError: t2.isoWeek is not a function（完美解决方案）
王二红
03-12 3803
vue3，elementPlus，el-date-picker，DatePicker日期选择器，DateTimePicker日期时间选择器，报错t2.isoWeekisnotafunction，element-plus日期时间组件，报错t2.isoWeek是什么意思，如何解决vue3elementplus组件报错，怎么解决el-date-picker日期选择器报错，vue3报错Uncaught(inpromise)TypeError:t2.isoWeekisnotafunct
vite 构建vue3 + ts项目，并引入pinia、sass等相关插件（不包含配置）
记录自己的学习和工作心得，欢迎交流。
08-04 208
vite 构建vue3 + ts项目，并引入pinia、sass等相关插件（不包含配置）
elementplus 运行出来了以后是 组件是乱的怎么解决啊
weixin_65700316的博客
07-03 131
elementplus 运行出来了以后是 组件是乱的怎么解决啊
vue3中使用element-plus表格多选进行回显，分页勾选保存
weixin_69186400的博客
04-21 4611
vue3 使用element-plus对表格进行多选回显保存
Element Select 选择器自定义样式在多选时出现样式错乱解决
weixin_40400844的博客
02-26 4840
Element Select 选择器自定义样式在多选时出现样式错乱解决问题描述开发解决方法 问题描述 在使用el-select组件时，需求提出的要求： 1、select可以随便设置高度（不受size属性制约）； 2、允许select多选显示tag并使高度自适应； 开发 设置select高度样式，注意，这里使用的是scss修改样式： <div class="elSelectBox"> <el-select v-model="valMult" multiple
vue3 element plus 关于单选框/多选框回显数据
m0_56553975的博客
01-17 1533
回显的时候，el-option 框内的待选数据如果是数组类型，那么el-select也是数组类型，这样就回显了。
el-table多选数据回显
蒙蒙细雨的博客
03-30 6692
el-table多选数据回显，每次做老是忘，记录一下，支持切换分页多选功能，以及数据回显 1.重写表格多选与全选（因为表格自带的切换分页会清空） 2.父组件传过来的选中的数据 3.重组一下数据，返回的与采购单位列表字段不一致 4.表格数据回显方法 设置范围弹窗 <template> <div> <!--设置范围--> <el-dialog title="设置范围" :visible.sync="setDialog
Linux-Nginx网站服务_在linux系统中执行killall -s quit nginx命令的作用分别是什么
2401_83621095的博客
04-26 847
user = php #运行用户。group = php #运行组。
vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中
weixin_44867717的博客
03-29 2304
【代码】vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中。
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
sybh的博客
11-17 2000
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
el-table分页时多选数据的保存和回显
余白x的博客
12-04 2626
2、分页获取新数据之后匹配当前页应该选中的数据，使用 multipleTableRef.value!把所有选择的数据全部存到一个大数组中，切页的时候匹配原数据利用ref节点的.toggleRowSelection方法进行回显。1、勾选和全选时需要判断是选中还是取消，然后更新大数组数据。所有代码：（示例为前端分页）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙子cms

node+express扫码获

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值