vue.js对表格的操作实例
导语：在数据列表中，通常会有对数据的增加、删除，修改和查等操作，那么使⽤vue该如何实现呢
在管理员的⼀些后台页⾯⾥，个⼈中⼼⾥的数据列表⾥，都会有对这些数据进⾏增删改查的操作。⽐如在管理员后台的⽤户列表⾥，我们可以录⼊新⽤户的信息，也可以对既有的⽤户信息进⾏修改。在vue中，我们更应该专注于对数据的操作和处理。
⽐如我们有⼀个这样的页⾯：
我们在这个页⾯⾥，就实现了增删改查4个功能，点击链接查看demo【】。
我们把这些⽤户信息保存到list的数组中，然后增删改查就在这个数组上进⾏：
list: [
{
username: 'aaaaa',
email: '123@qq',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'bbbbb',
email: 'bbbbbbb@163',
sex: '⼥',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
}
// ...
]
设置这些数据主要也是复习⼀下vue对表单的处理操作，这⾥⾯的表单有：⽂本输⼊框，单选按钮，select选择框，复选框等。
1. 展⽰数据
我们的数据都放在数组list中，但是这⾥并不直接对list对循环输出，⽽是先把list中的数据给⼀个数组slist，对slist进⾏循环输出。因为我们在后⾯的查询功能中需要对数据进⾏过滤，数组list⼀直保存着原
始数据（包括新增、修改后或已删除后），⽽数组slist只负责展⽰。
在vue中提供⼀个setSlist⽅法，将需要展⽰的数据给了数组slist：
// 获取需要渲染到页⾯中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
然后在html中使⽤v-for把slist数组渲染出来：
<tr v-cloak v-for="(item, index) of slist">
<td>{{index+1}}</td>
<td>{{item.username}}</td>
<td>{{ail}}</td>
<td>{{item.sex}}</td>
<td>{{item.province}}</td>
<td>{{item.hobby.join(' | ')}}</td>
<td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
</tr>
在操作这⼀栏中，给修改和删除操作绑定上事件。
2. 增加和删除功能
把增加功能和删除合并到⼀起，是这两个功能相对来说都⽐较简单。
增加⽤户时使⽤push⽅法，把⽤户的信息添加到list数组的最后：
this.list.push({
username: 'ffff',
email: 'fffffff@163',
sex: '⼥',
province: '河南省',
hobby: ['弹琴', '插画']
});
这样就能添加⼀位ffff的⽤户了。
删除⽤户时，通过splice(index, 1)，可以删除index位置的数据，页⾯上的数据⾃动就会更新。
3. 修改功能
当我们想要修改某个元素时，可以把这个位置上的数据取出来放到弹层⾥（或者其他某个位置），在弹层⾥的信息可以取消或者修改后进⾏保存。
假设我们弹层⾥的数据是selectedlist，那么每次修改时，把index位置的数据给了selectedlist，然后在弹层中修改selectedlist。我们也能看到修改数据的类型：⽂本框（⽤户名，邮箱），单选按钮（性别）
，select选择框（所在省份），多选框（爱好），这⾥我们主要练习的是表单处理（）。弹层是否显⽰⽤变量isActive来控制：
// 修改数据
modifyData(index) {
this.selected = index; // 修改的位置
this.selectedlist = this.list[index];
this.isActive = true;
}
有没有发现⼀个问题，当修改弹层中的信息时，表格中的数据也同步更新了。可是我们本⾝是希望当点击保存按钮时，才把弹层中的数据保存到表格⾥。问题的根源就出在这⾥：
this.selectedlist = this.list[index];
因为list[index]是个Object类型的数据，若使⽤=赋值，则赋值操作为浅度拷贝（把数据的地址赋值给对
应变量，⽽没有把具体的数据复制给变量，变量会随数据值的变化⽽变化），selectedlist与list[index]使⽤相同的数据地址，互相引起数据值的变化。因此这⾥我们需要进⾏深度拷贝：
this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串，然后再转换
当⽤户修改数据后，selectedlist就会发⽣变化，点击保存按钮时，将数据重新保存到index位置：
/*
this.list 数据数组
this.selected 刚才修改的位置
this.selectedlist 需要保存的数据
*/
Vue.set(this.list, this.selected, this.selectedlist);
4. 查询功能
在第1⼩节中我们已经说过，在页⾯表格中展⽰的是slist中的数据，就是为了⽅便执⾏查询操作：
js合并两个数组// 获取需要渲染到页⾯中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
每次根据某些条件将过滤后的数据赋值给slist数组，展⽰出查询后的数据。这⾥我们的查询实现了两个⼩功能：
1. ⽤户在输⼊某个字符后，⾃动在输⼊框下⽅⽤列表展⽰出⽤户可能要查询的词语（如⽤户名等）
2. 同步更新表格中的数据
这⾥我们通过⽤户名和邮箱进⾏查询，因此在过滤数据时，需要检测⽤户名和邮箱是否含有查询的单词。我们先给输⼊框绑定⼀个input事件，同时⽤datalist展⽰⽤户可能要查询的词语：
<input type="text"placeholder="search" @input="search"list="cars"class="search">
<datalist id="cars">
<option v-for="item in searchlist":value="item"></option>
</datalist>
search功能的实现，searchlist为在输⼊框下⽅展⽰的可能要搜索的词语，ss数组则保存过滤后的数据，当循环完毕后，设置调⽤setSlist⽅法修改slist数组：
// 搜索
search(e) {
var v = e.target.value,
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 过滤需要的数据
this.list.forEach(function (item) {
// 检测⽤户名
if (item.username.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.username) == -1) {
self.searchlist.push(item.username);
}
ss.push(item);
} else if (ail.indexOf(v) > -1) {
// 检测邮箱
if (self.searchlist.ail) == -1) {
self.searchlist.ail);
}
ss.push(item);
每当⽤户输⼊或者删除⼀个字符时都会调⽤search⽅法，执⾏查询操作，当⽤点击展⽰词语列表时，也会调⽤search⽅法。
5. 将弹层独⽴为组件
其实我们应该发现，修改功能（或新增功能）从代码和样式上相对来说⽐较独⽴，我们把弹层独⽴为组件的形式，把需要修改的数据通过props传递给该组件（新增数据时，可以给组件传递⼀个空数据），当⽤户点击保存时，再通过$emit给了⽗组件（⼦组件不能直接⽗级的数据，需要⽤data或者computed⽣成⼀个局部变量，然后再使⽤$emit⽅法把这个局部数据再传递上去）：
// 弹层组件
Vueponent('model', {
props: ['list', 'isactive'],
template: `<div class="overlay" v-show="isactive">
<div class="con">
<h2 class="title">新增 | 修改</h2>
<div class="content">
/* 省略 */
</div>
</div>
</div>`,
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change'); // 关闭弹层，修改isactive值
},
modify() {
this.$emit('modify', difylist); // 将修改后的数据传递给⽗组件
}
⽗组件，在⽗组件中截取change和modify事件，再⽤changeOverlay和modify来实现：
<model :list='selectedlist':isactive="isActive"v-cloak @change="changeOverlay" @modify="modify"></mode

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。