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 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 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入门基础之php代码写法
2011/12/30 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
简单JS代码压缩器
2006/10/12 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python实现感知器算法详解
2017/12/19 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python  logging日志打印过程解析
2019/10/22 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
关于赌博的检讨书
2014/01/08 职场文书
综合实践活动总结
2014/05/05 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
债务纠纷委托书
2014/08/30 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL