用vue.js+element ui实现对表格的数据点击编辑按钮进行数据回显遇到的问题总结

最新推荐文章于 2023-10-28 13:33:44 发布
最新推荐文章于 2023-10-28 13:33:44 发布
阅读量2.8k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43500065/article/details/106577734
版权

1.首先界面展示

在这里插入图片描述 2.点击编辑的按钮，界面展示 在这里插入图片描述 3.再点击确定按钮，控制台将报如下错误： 在这里插入图片描述

根据字面意思是无效属性：属性“model”的类型检查失败。应为对象，获取值为“”的字符串。
经过一番折腾，发现自己的代码中将this.editForm = ‘’,应该写成this.editForm={}
在这里记录，希望不要再犯这种错误！！

m_Michi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中关于组件(element,vant等等)回显很慢的问题
Meraln的博客
06-23 1643
业务场景：关于表单的交互，特别是从接口请求的数据要进行回显的时候。 此时有一个对应表单定义的类是这样 private form = { a: '1', b: '2', c: '3' } 然后需要请求回来的数据在表单上进行回显 const res:any = await request() // res = {a: 'a', b: 'b', c: 'c'} 很多时候我们为了偷懒，就直接 this.form = res 但是这样写会造成 回显很慢的问题，偷懒是不能偷懒
vue+element UI实现树形表格带复选框的示例代码
10-17
主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue表单回显数据无法修改的问题
Crazy_GirlLL的博客
09-23 3572
前言：今天在做修改操作的时候遇到了一个问题，数据回显到修改表单之后，发现无法输入，也不能实现修改 项目环境：springboot+vue前后端分离 问题：修改操作数据回显无法输入值 一、问题截图 二、代码展示 编辑按钮 <el-button type="text" size="small" @click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">编辑 点击编辑按钮后.
vue - 简单实现数据回显
热门推荐
m0_55969466的博客
01-11 1万+
简单记录自己写的数据回显，比较复杂如果有更好的方法请指正 我是用判断来显示通过值来判断可否点击 //这块是判断是否显示 哪一个输入框 <template v-if="isInput"> <van-field v-model="repeatauthInfo.repeatbankNo" label="本人实名银行卡" name="本人实名银行卡2"
vue点击修改数据回显的方式
m0_47195133的博客
04-06 9338
vue点击修改数据回显的方式
Vue项目中 点击某个选项后进入编辑页面，点击取消/保存/返回时 能够再次返回到点击的地方
qq_38774121的博客
12-25 1万+
Vue项目中 点击某个选项后进入编辑页面，点击取消/保存/返回时 能够再次返回到点击的地方 简介：可以算是记忆功能，记忆上一次点击的地方 解析： 拿最简单的点击取消来举例 首先我先说明一下，我这个页面时循环生成的多个div、 首先在循环的时候绑定一个id，这个id可以是你循环出来的后台数据，也可以是你自定义的数据。 注意：不要使用数字开头 在点击按钮跳转的时候，通过路由，将此id传输过去，同时...
基于Vue2+element-ui+AntV X6实现的流程图编辑器
最新发布
11-02
基于Vue2+element-ui+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json...
Vue+Element ui 根据后台返回数据设置动态表头操作
10-14
在Vue和Element UI框架中，动态设置表头是一项常见的需求，尤其在处理后端返回的不确定数据格式时。本文将详细讲解如何根据后台返回的数据来动态生成Element UI表格的表头。 首先，我们来看第一种情况，即后端返回...
解决element ui select下拉框不回显数据问题的解决
10-17
然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个问题，并提供解决方案。 问题描述： 当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时...
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。...
weixin_33674976的博客
01-29 1280
vue-bxz-table 一、封装element-ui的table组件： 定义表格高度全屏 增加前台分页功能。 自定义表头，循环输出整体表结构。 表格内编辑（输入框和下拉选择框）。 表格内自定义按钮和点击事件。 每一列增加过滤函数。 可格式化数字 可勾选多页内的checkbox，同时保存或删除，切换页面后保留checkbox选中状态。 表格内编辑后，自动选中该行。 父组件打印勾选的行。 自定义...
element组件form表单输入框输入内容不回显
你怎么也喜欢嘴巴嘟嘟
03-31 2893
果然 vue3 还是有很多问题 使用一个element-plus 还是有很多问题 比如 我刚遇到的 输入到表单 无法回显问题 暂时无解，可能还是不如了解，但是使用了强刷新只有 数据是回显了 暂时还没遇到问题 <el-form :model="UserObj" :rules="rules" ref="UserObj" label-width="80px" status-icon
vue, element ui table 数据回显问题
xdtz_z的博客
10-28 728
vue, element ui table 数据回显问题。
VUE携带参数跳转并回显
qq_42980244的博客
08-18 1806
实现的功能：点击查看按钮会带参数跳转到新页面，并且要在新页面回显这一些数据（用户名，登陆时间等） 先看一下HTML的button是怎么写的 有一个方法： lookAdmin(i)，那我们去js里面看一下这个方法 lookAdmin(i){ let that = this; $.ajax({ type: "get", async: true, // 同步 一定会等数据返回 ...
HTML+VUE+element-ui通过点击不同按钮展现不同页面
m0_62314761的博客
09-26 2070
点击不同按钮展现不同页面
关于element 弹窗中使用表单回显的问题
QLP544134747的博客
04-15 2031
关于js的深拷贝
记使用el-form中遇到的一个坑，为什么改变了一个选项的值却触发了其他选项的表单验证？为什么el-slecet有值选择后却不回显？
lingliu0824的博客
08-16 1925
先直接说一下解决方案吧：看一下el-form的:model绑定的对象是不是每一个表单数据都初始化了。 我的需求： 如图当选择了区域1时会动态改变区域2的选项，且区域2对应的表单验证required也会由false变成true，性别选项为独立选项。 最初代码： <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class=
使用element-ui+vue 做修改功能时，数据不回显问题
jjj2287722340的博客
10-26 1729
后端数据已经做好了，页面发送数据获取id给后端，查询数据后返回给前段页面。res.data.data数据是可以打印出来的，但是这个_this.from一直打印出来的是undefined，找了很多方式都没有办法把值附上去。
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4126
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
vue页面回显数据_vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据。...
06-06
对于多选的Table数据回显，可以使用Vue中的v-model来实现。你可以在data中定义一个选中的数组，然后在Table中使用v-model绑定这个数组，这样就可以实现多选数据回显了。 例如： ```html <template> <div> <el-table :data="tableData" :row-key="row => row.id" v-loading="loading" v-model="selectedItems"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { loading: false, tableData: [ { id: 1, name: 'John', age: 18 }, { id: 2, name: 'Jane', age: 22 }, { id: 3, name: 'Tom', age: 20 }, ], selectedItems: [], }; }, }; </script> ``` 对于多页选择数据回显，可以在Table中使用selection-change事件来监听选中数据的变化，然后在翻页时将选中数据保存在一个数组中。例如： ```html <template> <div> <el-table :data="tableData" :row-key="row => row.id" v-loading="loading" v-model="selectedItems" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange"> </el-pagination> </div> </template> <script> export default { data() { return { loading: false, tableData: [], selectedItems: [], currentPage: 1, pageSize: 10, total: 0, selectionList: [], }; }, methods: { handleSelectionChange(selection) { this.selectionList[this.currentPage] = selection; }, handlePageChange(page) { this.currentPage = page; if (!this.selectionList[page]) { this.selectionList[page] = []; } this.selectedItems = this.selectionList[page]; }, }, }; </script> ``` 这样就可以实现多页选择数据回显，并且分页记录保存选中的数据了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值