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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
javascript检测两个数组是否相似
May 19 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
PHP安全配置
2006/12/06 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
实例讲解python函数式编程
2014/06/09 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python Socket使用实例
2017/12/18 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Django xadmin安装及使用详解
2020/10/26 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
《珍珠泉》教学反思
2014/02/20 职场文书
安全标语口号
2014/06/09 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
大四学生个人总结
2015/02/15 职场文书
培养联系人考察意见
2015/06/01 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python