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

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

思路:

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

所以我的部分js代码:

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

发布了34 篇原创文章 · 获赞 13 · 访问量 4922

猜你喜欢

转载自blog.csdn.net/qq_40544291/article/details/102725167