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

使用情况，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表单中遍历表单操作按钮的显示隐藏示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 实现input表单元素的disabled示例

    场景 今天产品经理提了一个需求: 一个API的账号体系增加一个checkbox控制API输出字段,但是有三个是伪控制,事实上是接口里面写死的, 所以是必须选中的 分析 重点是怎么在Vue组件中实现 checkbox的disabled, 哈 这个肯定是需要使用元素绑定的 Vue做这个操作可以实现disabled input元素的传递, 这个就很秒了 解决 <input type="checkbox" :disabled="" > 具体解决方案如下 <

  • Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮 单选按钮:单选按钮用

  • vue获取form表单的值示例

    这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phone" prop="phone" v-model="phone" clearable></el-input> JS: var phone = this.phone; var password = this.password; var that = this; var phone

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

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

    使用情况,vue中返回的数据循环遍历如果用到v-if时不能直接赋值true 或者false,要true 或者false push到数组里面,隐藏或显示时用 splice方法. 以下是详情 1. 第一步先在data中定义数组 data () { return { passSaveShow: [], // 通行组保存和取消的显示隐藏 passEditShow: [], // 通行组编辑的显示隐藏 checkedUnLink: [], // 取消关联是否选中 valDate: [], // 有效期显示

  • 如何在 Vue 表单中处理图片

    问题: 我在 Vue 中有一个 form 表单,用于上传博客帖子,它有标题.正文.描述.片段和图片等范围.所有的一切都是必需的.我在 Express 中设置了一个 API 来处理这个问题.我在 Postman 中测试正常,但是我不知道如何通过浏览器将文件发送给数据库.我一直收到 500 错误,并且我将数据打印到控制台,而图片字段为空,所以我确信这就是问题所在,但我就是搞不清楚怎么办. 这是我前端页面的 form 表单: <template> <div class="contai

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • Vue表单输入绑定的示例代码

    基础用法 你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但是v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据. v-model会忽略所有表单元素的value, checked, selected特性的初始值而总是将Vue实例的数据作为数据来源.你应该通过JavaScript在组件的data选项中声明初始值. (1) 文本 <input v-model="me

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    一.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了.   值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. 1.为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex, 实际上数据还

  • Vue表单提交点击事件只允许点击一次的实例

    常用出现场景:商城点击订单提交 1.使用Vue封装事件 body: <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法: methods: { submitOrder() { // 处理逻辑 } } 2.使用原生JS事件 在数据data里面声明一个flag属性 data() {

  • Vue 表单输入绑定v-model

    Vue 表单输入绑定v-model

    目录 1.v-model 2.绑定的属性和事件 3.表单元素绑定 3.1 input绑定 3.2 textarea绑定 3.3 checkbox绑定 3.4 radio绑定 3.5 select绑定 4.值绑定 4.1 代码详解 5.修饰符 5.1 .lazy 5.2 .number 5.3 .trim 1.v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 2.绑定的属性和事件 v-model在内部

  • js表单中选择框值的获取及表单的序列化

    本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习. var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value

  • Vue表单验证插件的制作过程

    Vue表单验证插件的制作过程

    前言 前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. 当然为什么不找个插件呢? vue-validator呀. 1.我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需要.事实证明,vue-validator有50kb,而我写的va.js只有8kb. 2.另一个是,vue-val

  • Vue表单实例代码

    什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js 特点 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动: 自动追踪依赖的模板表达式和计算属性. 组件化: 用解耦.可复用的组件来构造界面. 轻量: ~24kb min+gzip,无依赖. 快速: 精确有效的异步批量 DOM 更新. 模块友好: 通过 NPM 或 Bower

随机推荐