一直专注写后台的本人,之前新产品回显问题,一直没处理,这对实施配置系统,会产生很大影响 由于写页面的同事要离职,一直在游泳,只能自己上手去干了。本人对 vue 和elementUI 处于一知半解,所以一开始是上百度 看下有没有现成的,但我发现 查到的资料 都只告诉你 添加的时候  操作分页的时候 能保存你之前页数打钩的数据,保存后,的确把我们所打钩上的数据保存下来了,然后点击编辑,网上的逻辑是让我们 循环进行判断是否存在进行打钩,但如果再进行保存,只会保存你当前页打钩的数据或者去掉的数据,其他数据就进行丢失了,当然我们可以创建几个变量进行保存,然后判断,代码量太多了,作为一个合格的摸鱼选手,这是不允许的,能简单就坚决不复杂。我处理的方式如下:

1.跟网上一样 先填充以上参数:

这个 :row-key 就很重要了 这个用法应该element内部用来判断是否打钩并动态生成数据的,本人这边的主键是xx编码

后面就是重头戏了:如何实现修改 回显打钩,又可以动态保存你当前页操作过的数据(去掉或者新增的数据,之前的数据又可以动态进行新增或者删除) 本人写法是,通过父组件调用后台数据传给子组件 然后把上次保存的数据进行如下操作

这样 第一次进来的时候 把你之前所有的数据 放进elementUI 进行保存

然后当你 当前页进行新增 或者删除的选项的时候,element框架 会在内部判断 数据动态进行删除或者新增 给予新的val

VUE+elementUI 分页请求回显问题解决方案的更多相关文章

  1. Vue ElementUI Tree组件 回显问题(设置选择父级时会全选所有的子级,有此业务场景是不适合的)

    业务场景下有这样的问题 业务需求需要保存前端 半选节点 解决方案 let checked = this.$refs.menuTree.getCheckedKeys(); //此方法获取半选节点 let ...

  2. vue+ElementUI 分页

    现在写的Vue+ElementUI是自己写的是文档上的死数据,所以在分页上自己分割了一下,如果有接口话,会方便一点,使用的是分页的完整功能.都差不多啦! 撸起来 <template> &l ...

  3. vue Element-UI 分页使用(1)

    最近在使用Element-UI这套框架配合Vue来写前端页面.在用Element-UI来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...

  4. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

  5. Element-ui表格选中回显

    先瞄一下,是不是你要的效果 然后,废话不多说,直接上代码啦 <template> <div class> <div class="projectData&quo ...

  6. vue element upload图片 回显问题

      beforeUpload (file) { var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); ...

  7. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  8. vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据。

    业务的需要:我要对与会人员勾选,记录所选的与会人员,并且点击到别的页面上时也要记录所勾选的.第一次尝试,每次点击下一页数据都会清空.然后我就去element ui官网查看了api.实现如下: 在tab ...

  9. Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

    页面跳转反显(点击项,点击table滚动的位置,搜索条件,分页回显) 点击table tr项后,页面跳转到下级页面,返回回显搜索条件.当前页码.并将点击项select选中.滚动条也被记录回显跳转时滚动 ...

  10. vue 运用ElementUI,做select下拉框回显

    第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. ...

随机推荐

  1. WeNet调试

    运行: 参照:markdown 问题: CMake Error: Error: generator : Ninja Ninja:提高构建速度 wenet/runtime/libtorch/fc_bas ...

  2. Word11 工程学院讲师论文office真题

    1.根据题目一的要求,打开素材文件,点击[文件]-[另存为],选择[当前文件夹],命名为Word. 2.根据题目二的要求,根据提供的参考样式,打开Word的文档,在[布局]里点击[页面设置]的右下角, ...

  3. 基于线程的并行-Python 并行编程学习笔记(一)

    前言 最近写一些模拟集群智能的算法,虽然机制简单,但是随着个体的增加,设计的计算量就比较大了,尤其是加上matplotlib进行动态展示,使得运算量骤增,看着画面也比较卡.之前想把算法转化成c++代码 ...

  4. vmware网络连接

    vmware提供桥接模式网络连接.网络地址转换 (NAT).仅主机模式网络连接和自定义网络连接选项,用于为虚拟机配置虚拟网络连接.在安装 vmware 时,已在主机系统中安装用于所有网络连接配置的软件 ...

  5. docker-compose简易编写和模板命令

    version: '3' service: mysql: #指定容器名称 restart: always # 代表知道docker 启动那么这个容器就跟着一起启动 image: daocloud.io ...

  6. Linux系统Shell脚本第六章:文件三剑客之sed

    Shell编程三剑客之sed 前言 一.Sed编辑器 (1)Sed概述 (2)Sed工作流程 (3)Sed基本语法 二.Sed用法示例 (1)Sed输出指定行 (2)插入符合条件的行 (3)删除符合条 ...

  7. springboot+Elasticsearch 复杂查询

    以前没做过ES 里面的查询,第一次接触还是走了点弯路的. 就是这个字段你在ES 都不用模糊查的话,就可以设置 type = FieldType.Keyword,比如ID之类的. 一:建ES存储的实体 ...

  8. c# string.format 中使用$的坑

    string a = "hello}"; string s = string.Format($"{a}"); 上面这种情况,会报格式错误,会把hello}中的} ...

  9. Micro-OA系统

    Micro-OA简单描述 MicroOA是一款不需要专业的开发知识或开发经验,通过页面交互式即可实现动态搭建表单的微型办公自动化系统.在日常工作当中,我们面临着各种各样的表单,在开发系统时,若我们采用 ...

  10. Jmeter:随机类函数

    一.__Random 功能介绍:计算范围内的随机数 ${__Random(参数 1,参数 2,参数 3)} 参数 1:开始数字,包括在内 参数 2:结束数字,包括在内 参数 3:注册变量名称  二._ ...