可以利用我们所学的vue基本用法来实现表单的添加及增删改查,效果如下:
需要引入vue.js,代码如下:
<script src="./node_modules/vue/dist/vue.min.js"></script>
html代码如下:
建立简单地表格与表单方便我们的添加,并将vue中的对象内容添加至表格
<div id="app">
<p>
输入名字:
<input type="text" v-model="that">
<button @click="search">查询</button>
</p>
<fieldset>
<legend>添加用户</legend>
<p>
序号:
<!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
<input type="text" v-model="id1">
</p>
<p>
姓名:
<!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
<input type="text" v-model="name1">
</p>
<p>
年龄:
<input type="text" v-model="age1">
</p>
<button @click="add()">添加</button>
</fieldset>
<fieldset v-show="isShow">
<legend>修改用户</legend>
<p>
序号:
<!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
<input type="text" v-model="upId">
</p>
<p>
姓名:
<!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
<input v-model="upname" type="text">
</p>
<p>
年龄:
<input v-model="upage" type="text">
</p>
<button @click="upFn">确认修改</button>
</fieldset>
<table border="1" cellpadding="5">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<!-- 循环的时候需要动态绑定一个key 动态绑定需要使用v-bind
v-bind 可以简写为:-->
<tr v-for="(item,i) in search(that)" v-bind:key="item.id">
<td v-model="list.id">{{item.id}}</td>
<td v-model="list.name">{{item.name}}</td>
<td v-model="list.age">{{item.age}}</td>
<td>
<button @click="chenge(i)">修改</button>
<button @click="del(item.id)">删除</button>
</td>
</tr>
</table>
</div>
我们将vue的解构代码黏贴如下,有了data的内容我们就可以将内容添加至表格了,如下:
new Vue({
/* 挂载到id为app元素身上 */
el: "#app",
/* 定义数据 */
/* 数据驱动视图 */
data: {
name1: "",
age1: "",
id1: "",
that: "",
upId: "",
upname: "",
upage: "",
num: null,
isShow: false,
list: [{
id: 1,
name: "zhangsan",
age: 30,
}, {
id: 2,
name: "lisi",
age: 40,
}, {
id: 3,
name: "wangwu",
age: 50,
}]
},
})
接下来就是定义我们的方法,并加以绑定监听事件:
查询功能:
methods: {
// 查询
search(that) {
console.log(this.that);
return this.list.filter(item => {
if (item.name.includes(that)) {
return item;
}
console.log(that);
})
}
},
})
增加功能:
methods: {
// 增加
add() {
var car = { id: this.id1, name: this.name1, age: this.age1 }
this.list.push(car)
this.id1 = this.name1 = this.age1 = ""
},
)
修改功能:
注意点是我们要求点击修改的时候,要求回显,所以修改我们要两种方法,第一回显,第二修改,代码如下:
methods: {
// 回显
chenge(i) {
this.isShow = !this.isShow;
let arr = this.list.find((item, index) => index == i)
this.upId = arr.id;
this.upname = arr.name;
this.upage = arr.age;
this.num = i;
},
// 修改
upFn() {
this.list.splice(this.num, 1, {
id: this.upId,
name: this.upname,
age: this.upage,
})
},
}
删除功能:
methods: {
// 删除
del(id) {
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
return true;
}
})
},