vue+elementUI表单优化,修改行数据,不用发送请求初始化表单

最新推荐文章于 2021-12-21 22:36:51 发布
最新推荐文章于 2021-12-21 22:36:51 发布
阅读量763 收藏
点赞数
分类专栏： 前端开发 文章标签： vue 前端优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40544291/article/details/102725167
版权

在这里插入图片描述
写出这个优化之前,是因为服务器有点差,每次修改上下架状态的时候,发送修改状态的请求,为了页面显示的"文本"状态也改变,还需要发送一次初始化列表的数据,对于以后数据量大的时候,是很不友好的,而且前端的优化,不就是减少请求么,所以就想着优化一下.

思路:

1.后端返回的初始化表单数据,我存在了data()的tableData中,上下架的状态( 0:下架 1:下架 )
在这里插入图片描述
在这里插入图片描述
2.html代码,elementUI在表单中已经帮我们封装好了vue的插槽,其实就是slot-scope,我们直接用就好
在这里插入图片描述
3.js代码
其实elementUI的表格示例给了我很大的启发,通过scope.$index得到当前行在tableData的下标,然后修改tableData的值,因为vue的特性,tableData值被修改,则会重新渲染表单,这样就不用发送初始化表单的请求了
在这里插入图片描述

所以我的部分js代码:

在这里插入图片描述
尾言: 因为学识浅,所以只想到这个一个方法,大佬如果有更好的方法,请下方留言,不胜感激!

麦兜:)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于element-ui开发的动态表单设计组件
XDLK2的博客
06-10 1038
基于element-ui开发的动态表单设计组件 介绍一款基于element-ui 2.x开发的动态表单设计器组件，以及表单查看组件。点击查看 github地址：https://github.com/xlkai/yz-dync-form 效果图： 丰富特性 基于element-ui 2.x； 内含丰富表单组件； 可以实现自定义新增或删除表单组件； 可以自定义实现部分组件的数据来源操作 支持组件 表单设计器，包含以下组件： 输入型组件：单行文本、多行文本、密码框、计数器 选择型组件：下拉单选、
vue基于element-ui单选按钮美化插件
06-11
一款简洁美观的vue基于element-ui单选按钮美化插件，有多种样式可以选择的单选按钮美化代码，点击切换时还带有动画效果。
Android列表中数据修改不请求后台
BMF_intern的博客
11-20 414
在项目开发中我们经常会碰到在一个列表页面点击item跳转到对应的详情页面，当在详情页面修改某些数据后，返回列表页面需要修改列表页面的数据，很早的的时候我们一般就是直接返回然后刷新数据，但是这样其实很不友好，比如说我没有修改  你也刷新，或者我改了列表的第二十个数据刷新后就直接跳到第一项去了。这个时候我们其实可以用startActivityForResult（）跳转到详情页面并将选中的的list的p
Vue+ElementUI实现表单动态渲染、可视化配置的方法
11-29
动态渲染就是有一个异步的数据，大概长这样： { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "input", "label": "姓名", "disable": false, "readonly": false, "value": "", "placeholder": "请输入姓名", "rules": [], "key": "name", "subtype
vue后台系统表格编辑功能
seeeeeeeeeee的博客
07-02 1379
后台系统都会遇到的表格，其中编辑功能需要点开后有当前行的数据，然后更改后再从新渲染到表格中，记录下如何实现吧。 效果 思路 表格编辑功能弹框思路： 弹框内有当前行表格的数据： 单独把弹窗写一个组件，并用vuex来互相连接数据 表格用slot-scope插槽，点击事件把scope.row(当前行信息)当参数。 点击事件把隐藏的弹框改为true让他显示出来。并且把row这个参数传给vuex里面的state内存起来，因为vuex会实时变化 然后再弹唱组件内用watch监听
vue+elementUI管理系统页面源代码
02-12
在“vue2+elementUI后台管理系统”中，Vue.js 的版本为2.x，它提供了响应式的数据绑定、指令系统以及组件系统，使得构建用户界面变得更加简单。 Element UI 是一套基于 Vue.js 的开源UI组件库，它由饿了么团队开发...
vue2+elementui+electron项目配置
06-06
接下来，你需要初始化一个新的Vue2项目，可以使用Vue CLI或者手动配置。如果你选择Vue CLI，可以运行`vue create my-app`，然后在创建过程中选择手动配置，添加Vue2和ElementUI。 安装ElementUI时，在项目根目录...
【狂神vue学习记录】vue+elementUI实战
08-16
在`demo`组件的生命周期中，你可能在`mounted`钩子中进行数据的初始化加载，或者在`updated`钩子中处理数据变化后的副作用。 Element UI 也提供了许多自定义样式和扩展功能，如自定义主题、国际化支持以及无障碍...
vue+elementui实现多层树形菜单
10-16
如果你的项目已创建并初始化，可以使用npm或yarn安装： ```bash npm install vue element-ui # 或 yarn add vue element-ui ``` 同时，别忘了在你的主入口文件（如`main.js`）中导入并使用Element UI： ```...
SpringBoot + Vue + ElementUI 的人力资源管理系统
04-10
ElementUI的组件则让界面设计变得轻松，如使用ElTable展示数据，ElFormItem进行表单验证，ElPagination实现分页等。 此外，项目的部署和运维也是重要环节。SpringBoot支持热部署，便于开发调试；而Vue.js的生产环境...
elementui 样式渲染的慢_vue+elementUI数据更新样式混乱
weixin_29156679的博客
01-12 508
用row-class-name给el-table设置行样式，数据更新后行样式渲染混乱，是不是需要用Vue.nextTick()在回调中更新，如果是，动态样式:row-class-name="tableRowClassName"如何在回调中更新？...tableRowClassName({row,rowIndex}){if(row.type===2){...
vue 根据字符串生成表单_【vue系列】优雅地用 vue 生成动态表单（一）
weixin_39632212的博客
01-12 577
需求背景开需求会了，产品说这次需求的表单比较多，目前有19个，后期的表单可能会有增加、修改。我作为这次的前端开发负责人，看到这样的需求，心里知道要这样搞不得把前端累死，首先表单居多，还要变更，以后维护起来也让人心力憔悴。于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，前端要处理的部分是动态生成表单，展现提交...
vue渲染缓慢我遇到的情况解决
weixin_43859458的博客
03-25 4651
情况说明：我自己把elementui的form组件重新封装了，里面加了很多类型，比如表格，代码编辑器等等，当我的表格中有许多其他form组件，如：input框，下拉框等，页面的渲染速度很慢 我的解决办法：当渲染表格的时候添加一个编辑按钮，渲染时渲染成文本，需要编辑时点编辑按钮再渲染成form组件 ...
vue + elementui 使用 dialog和form表单时数据渲染问题
weixin_45108907的博客
10-14 1288
问题：dialog和form表单一起使用，关闭模态框再次点开出现上次数据依旧渲染在上面的问题 解决：加个v-if 判断
element表格样式优化
smallteddy.blog.csdn.net
02-02 2748
1、表格的两种形式 2、根据官方文档写自己的表格 <div> <el-card> <div class="title">1.基本数据展示</div> <el-table v-loading="loading" :data="basicData" header-cell-class-name="basic_header" :header-cell-style="{ background:'#59A7D4',
vue---element实现动态渲染form表单数据，动态添加数据
热门推荐
maidu_xbd的博客
07-18 1万+
效果展示： 功能描述： 1.动态渲染form数据：动态从后台获取form数据，表单的label不固定，label和label对应的值均从后台获取，动态渲染label和label对应的值。 Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。具体说明见Object.keys() 2.动态删除属性：可删除属性（此处id和name属性不能删除，所以输入框后不出现删除按钮）。 3.动态添加.
Vue之用户登录功能（二）使用Element美化网站和实现验证
慎独
07-31 1112
引入Element 1、首先进入项目目录下，用npm安装Element npm i element-ui -S 2、在目录src/element/下创建文件index.js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 3、然后在main.js中添加以下代码进行引入 import './element'
Vue3+Element-Plus 实现在表单中自定义操作按钮 三二
build2024
12-21 1万+
1. 实现效果 分析需求 1. 首先操作列并不对应任何的数据结构，所以想要实现在列表中操作列增加按钮来实现编辑或者删除，必须要拿到对应的Id,才能进行数据操作。 2. 所以要拿到对应的Id，必须通过使用作用域插槽来实现操作列的渲染 2. 实现步骤 2.1 定义作用域插槽步骤 定义template 结构，在template 结构中定义v-slot="scope" 并定义一个scope接收 通过 scope.row 获取到当行前的数据 例如： 如下图，通过作用域的方式取到当...
vue+elementui搜索新增数据
最新发布
05-17
5. 在mounted钩子中初始化数据。 ```javascript mounted() { this.searchData() } ``` 6. 在模板中显示搜索结果。 ```html 姓名"> 年龄"> <!-- 其他表格列 --> ``` 这样，当你输入搜索关键字并点击“添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值