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 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 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
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
教你学会使用Python正则表达式
2017/09/07 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
python实现简易动态时钟
2018/11/19 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
strstr()的简单实现
2013/09/26 面试题
Python面试题集
2012/03/08 面试题
会计电算化应届生自荐信
2014/02/25 职场文书
优秀实习生感言
2014/03/01 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
篮球社团活动总结
2014/06/27 职场文书