vue表单中遍历表单操作按钮的显示隐藏示例


Posted in Javascript onOctober 30, 2019

使用情况,vue中返回的数据循环遍历如果用到v-if时不能直接赋值true 或者false,要true 或者false push到数组里面,隐藏或显示时用 splice方法。

以下是详情

1. 第一步先在data中定义数组

data () {
 return {
  passSaveShow: [], // 通行组保存和取消的显示隐藏
  passEditShow: [], // 通行组编辑的显示隐藏
  checkedUnLink: [], // 取消关联是否选中
  valDate: [], // 有效期显示
  pickDateShow: [], // 日期插件隐藏
  linkedValue: [],
  showImg: false, // 是否放大图片
  imgSrc: '', // 图片的路径
  checkName: '', // 输入姓名关键字
  checked: false,
  checkLists: [],
  checkPage: {
   page: 1,
   count: 2,
   total: 0
  }
 };
}

2.页面中使用

<td>
 <i v-if="passEditShow[index]" @click="editValDate(index)" title="编辑" class="el-icon-edit-outline"></i>
 <div class="passSave" v-if="passSaveShow[index]">
  <i @click="passSaveDate(index)" title="保存提交" class="el-icon-circle-check"></i> 
  <i @click="passCancel(index)" title="取消" class="el-icon-circle-close"></i>
 </div>
</td>

3.重要的一步,push到数组中

// 初始化加载数据
mounted () {
 let groupId = this.$props.perGroupInfo.id;
 let page = 1;
 let count = this.checkPage.count;
 let expired = 0;
 console.log(groupId);
 let url = `api/groupemp/linked?page=${page}&count=${count}&groupId=${groupId}&expired=${expired}`;
 this.$https.get(url).then(res => {
  console.log('查看初始化数据');
  console.log(res);
  console.log(res.data.data);
  console.log('查看初始化数据尾');
  this.checkLists = res.data.data;
  this.checkPage.total = res.data.Total;
  this.checkLists.forEach((item, index) => {
   this.valDate.push(true);
   this.pickDateShow.push(false);
   this.passSaveShow.push(false);
   this.passEditShow.push(true);
  });
 }).catch(err => {
  console.log('查看初始化数据报错');
  console.log(err);
 });
},

4.更改按钮的显示隐藏,使用splice ,不能直接更改

// 修改有效期
editValDate (val) {
 this.passEditShow.splice(val, 1, false);
 this.passSaveShow.splice(val, 1, true);
 this.valDate.splice(val, 1, false);
 this.pickDateShow.splice(val, 1, true);
 // console.log(this.valDate[val]);
 // console.log(this.pickDateShow[val]);
},

以上这篇vue表单中遍历表单操作按钮的显示隐藏示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 #Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 #Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 #Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 #Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 #Javascript
vue - vue.config.js中devServer配置方式
Oct 30 #Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 #Javascript
You might like
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP单链表的实现代码
2016/07/05 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
python 排序算法总结及实例详解
2016/09/28 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
浅析Python 多行匹配模式
2020/07/24 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python实现定时发送邮件
2020/12/23 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
前台文员的岗位职责
2013/11/14 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
《长相思》听课反思
2014/04/10 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Python 正则模块详情
2021/11/02 Python