<div id="app">
<div class="item">
<span class="name">Key:</span>
<input type="text" name="" id="" v-model="search.key" class="ipt" />
</div>
<div class="form-group">
<div>
<label>Name:</label>
<input type="text" class="ipt" name="" id="" value="" v-model="newPerson.name" />
</div>
<div>
<label>Age:</label>
<input type="" class="ipt" name="" id="" value="" v-model="newPerson.age" />
</div>
<div>
<label>Sex:</label>
<input type="" class="ipt" name="" id="" value="" v-model="newPerson.sex" />
</div>
<button @click="Add" class="add">添加数据</button>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" v-if="item.name.indexOf(search.key)>=0||item.age.indexOf(search.key)>=0||item.sex.indexOf(search.key)>=0">
<td>{{item.name}}</td>
<td :style="item.age>20 ?'color: red' : ''">{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button @click="Delete(index)">Delete</button></td>
<td><button @click="Edit(index)">Edit</button></td>
</tr>
</tbody>
</table>
<div v-if="show">
<label>Name:</label>
<input type="text" name="" id="name" :value="editData.name" v-model="editData.name" />
<label>Age:</label>
<input type="" name="" id="" :value="editData.age" value="" v-model="editData.age" />
<label>Sex:</label>
<input type="" name="" id="" :value="editData.sex" value="" v-model="editData.sex" />
<button @click="Confirm(editData.index)">Confirm</button>
</div>
</div>

  

<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app {
background: #2C3E50;
color: #fff;
padding: 20px;
} .form-group {
margin-bottom: 30px;
} table {
width: 100%;
padding: 8px;
text-align: center;
color: #000;
background: #E74C3C;
} table tr {
background: #F4F4F4;
height: 40px;
line-height: 40px; }
table tr td{
border-radius: 4px;
} table tr th {
background: #F1C40F;
color: #fff;
border-radius: 4px;;
} table tr button {
border: none;
background: #F1C40F;
border-radius: 4px;
padding: 4px;
color: #fff;
} .item,
.form-group {
background: #E74C3C;
padding: 10px;
} .form-group {
margin-top: 20px;
} .ipt {
width: 50%;
height: 18px;
line-height: 18px;
border: none;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px;
} .name,
label {
display: inline-block;
width: 60px;
font-size: 18px;
height: 28px;
line-height: 28px;
margin-right: 5px;
text-align: right;
} .add {
display: block;
margin-top: 10px;
margin-bottom: 10px;
border: none;
outline: none;
border-radius: 4px;
height: 28px;
line-height: 28px;
background: #F1C40F;
color: #fff;
text-align: center;
width: 30%;
margin: 0 auto;
}
</style>

  

<script>
new Vue({
el: "#app",
data: {
search: {
key: ''
},
newPerson: {
name: '',
age: '',
sex: ''
},
list: [{
name: 'An',
age: '18',
sex: 'female'
}, {
name: 'Bo',
age: '18',
sex: 'male'
}, {
name: 'Cin',
age: '18',
sex: 'male'
}],
editData: {
name: '',
age: '',
sex: '',
index: '',
},
show: false
},
methods: {
Add: function() {
this.list.push({
name: this.newPerson.name,
age: this.newPerson.age,
sex: this.newPerson.sex
});
//重置数组
this.newPerson = {
name: '',
age: '',
sex: ''
};
},
Delete: function(i) {
this.list.splice(i, 1);
},
Edit: function(i) {
this.show = true;
this.editData.name = this.list[i].name;
this.editData.age = this.list[i].age;
this.editData.sex = this.list[i].sex;
this.editData.index = i;
},
Confirm: function(i) {
this.show = false;
this.list[i].name = this.editData.name;
this.list[i].age = this.editData.age;
this.list[i].sex = this.editData.sex;
}
}
})
</script>

  

Vue表格数据增删改查及搜索的更多相关文章

  1. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  2. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  3. 用AngularJS实现对表格的增删改查(仅限前端)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  5. js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

  6. 基于AT UI实现表格的增删改查遇到的坑

    基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...

  7. 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  8. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  9. C#操作Excel数据增删改查(转)

    C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...

随机推荐

  1. 正确使用Block避免Cycle Retain和Crash

    Block简介 Block作为C语言的扩展,并不是高新技术,和其他语言的闭包或lambda表达式是一回事.需要注意的是由于Objective-C在iOS中不支持GC机制,使用Block必须自己管理内存 ...

  2. Xcode: This device is no longer connected error

    Quit the xcode and connect again will all right.

  3. 【spring data jpa】使用repository进行查询,使用userRepository.getOne(id)和userRepository.findById(id)无法从数据库查询到数据

    如题: 使用repository进行查询,使用CrudRepository自带的getOne()方法和findById()方法查询,数据库中有这条数据,但是并不能查到. userRepository. ...

  4. C#中通过反射获取类中非公有成员

    public class NGlbGlobeXComm { public static T GetPrivateField<T>(object instance, string field ...

  5. VS中的 MD/MT设置 【转】

    VS系列工具作为目前微软主打的集成开发环境,在历经了近20多年的发展后,到如今已经可以 说是Windows平台上各种IDE环境中的翘楚了.很多别的开发工具已经难望其项背了,如今VS2010也已经面市很 ...

  6. Android的包管理机制浅析(二)

    上篇刚好说到获取到了签名信息,以下进入安装过程,直接上源代码: private void installNewPackageLI(PackageParser.Package pkg, int pars ...

  7. 百科知识 华为手机P7如何更换电池

    参考下面 教程 https://item.jd.com/3265516.html  

  8. spring security开发步骤

    1.web.xml中加载spring ,spring security 2.spring security配置文件中配置好.... 3.自己写一个myFilter代替原有的FilterSecurity ...

  9. ZOJ 3810 A Volcanic Island (2014年牡丹江赛区网络赛B题)

    1.题目描写叙述:点击打开链接 2.解题思路:本题是四色定理的模板题.只是有几种情况要提前特判一下:n==1直接输出,1<n<5时候无解,n==6时候套用模板会出现同样的块.因此要特判一下 ...

  10. ubuntu 16.04 更新 gcc/g++ 4.9.2

    ubuntu 转载 2016年10月12日 :: 标签:ubuntu /g++ /gcc [html] view plain copy sudo dpkg -l g++ 最近在学C++primer , ...