在vue中场景,循环行,点击当前行编辑数据
当前列表
点击编辑,行变为编辑框。
<Row style="color:#999;margin-bottom:11px">
<Row style="margin-bottom:10px" v-for='(item,index) in jiujie' :key=item.name> <Row v-if='item.vis'>
<Col span="8">
{{item.name}}
</Col>
<Col span="2">
{{item.value}}
</Col>
<Col span="8" offset="6" style="vertical-align: middle">
<Button size='small' type="primary" @click='sdel(index)'>删除</Button>
<Button size='small' @click="edits(item)">编辑</Button>
</Col>
</Row> <Row v-if='!item.vis'>
</form>
<Col span="8">
<Input style="width:75%" v-model='jiujie[index].name' />
<div class='sdiv' :id="forId(index)">请输入变量名</div>
</Col>
<Col span="2">
<Select v-model="valueSelect">
<Option value="普通变量">普通变量
</Option>
</Select>
</Col>
<Col span="6">
<Input style="width:75%" v-model='jiujie[index].value' />
</Col>
<Col span="8" style="vertical-align: middle">
<Button size='small' type="primary" @click='save(item,index)'>保存</Button>
<Button size='small' @click="changevis(item,index)">取消</Button>
</Col>
</Row> </Row> <Row style="margin-top:15px">
<Col span="4" offset="8" style="color:#2db7f5 ;font-size:14px;">
<div style="cursor: pointer;" @click='addenvir'>
<Icon type="ios-add" />添加环境变量</div>
</Col>
</Row> </Row>
通过在循环的数组中对象中添加新的元素控制显示隐藏,
通过es6 map方法
this.envirconfig.map((item, index) => { this.jiujie.push(Object.assign({}, item, {
vis: true,
})) });
验证的话是动态加入id,验证之后通过控制id添加样式
forId: function (index) {
return "a" + index;
},
在vue中场景,循环行,点击当前行编辑数据的更多相关文章
- vue 如何在循环中 "监听" 的绑定v-model数据
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...
- Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域
跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...
- vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
- vue中解决拖动和点击事件的冲突
BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...
- 理解vue中v-for循环中得key原理及一些错误
作用:给节点做一个标识,相当于人类的身份证号,虚拟DOM中的标识 下列是key值的一些使用场景和带来的问题: js: const vm = new Vue({ el: ...
- vue中遇到的一个点击展开或收起并且改变背景颜色的问题。
<template> <div class="expense-center"> <div class="fl expense-left&qu ...
- vue中使用element写点击input内部标签(使用模态框传值)
首先附上源码地址 https://files.cnblogs.com/files/maruihua/vue-tagsinput-master.zip 这个是我修改后的代码.取消了部分功能,添加的一些功 ...
- VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...
随机推荐
- Macaca框架
收藏 http://www.cnblogs.com/jinjiangongzuoshi/p/6537795.html
- hdu4975 A simple Gaussian elimination problem.(最大流+判环)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4975 题意:和hdu4888基本一样( http://www.cnblogs.com/a-clown/ ...
- Linux 系统管理命令 - free - 查看系统内存信息
命令详解 重要星级: ★★★★★ 功能说明: free 命令用于显示系统内存状态,具体包括系统物理内存.虚拟内存.共享内存和系统缓存等. 语法格式: free [option] free [选项] 说 ...
- ubuntu mysql5.6二进制安装
200 ? "200px" : this.width)!important;} --> 介绍 以前一直使用centos今天需要对一台ubantu的系统安装mysql,虽然它也 ...
- linux下系统调用劫持ioctl
实验环境:linux 2.6.32 64位系统 采用lkm(动态加载内核模块)方式劫持ioctl系统调用,系统调用过程如图所示(以open为例子) 实验代码:(头文件有不需要的,但是懒得改了,在系 ...
- 洛谷P4891 序列
传送门 这题纯暴力竟然能过…… //minamoto #include<cstdio> #include<iostream> #define mul(a,b) (1ll*a*b ...
- 洛谷P3642 [APIO2016]烟火表演
传送门 题解 fy大佬好强……我根本看不懂…… //minamoto #include<bits/stdc++.h> #define ll long long using namespac ...
- C# 大文件上传
IHttpModule 分块上传大文件 IHttpModule 分块上传大文件 来源:http://www.cnblogs.com/HeroBeast/archive/2008/03/18/10848 ...
- HttpSession讲解
1:session进行身份验证的原理: 当客户端第一次访问服务器的时候,此时客户端的请求中不携带任何标识给服务器,所以此时服务器无法找到与之对应的 session,所以会新建session对象,当服务 ...
- iOS NSDictionary <--> NSString(JSON) in Objc
NSDictionary --> NSString + (NSString*)stringINJSONFormatForObject:(id)obj { NSData *jsonData = [ ...