这是吐槽，可以跳过的，刚学习vue的时候用的第一个框架是elementUI，真的是爱不释手，公司的业务要求也没那么多，基本都能满足，现在不一样了，啥都得自己写了。怎么说呢，幸与不幸，幸运的是能够自己多动手动脑了，不幸的是貌似脑子不够用的。。。。
这个类表格，为什么要类表格呢？他虽然可以做成table,但因为很多人感觉table太low，所以大家都不怎么用，领导也不让用，于是我就用了这个类表格的称呼。
在一些业务场景中我们得让用户能对类表格能增加删除，假如我们用的是jQuery，这就是简单的字符串拼接和事件绑定，中间会有点小波折，比如事件委托（刚开始是真的头疼）。但是我们现在用的vue，我们不应该再去拼接一坨字符串，我们只要操作数据就行了，我的思路如下：
- 创建一个数组对象
items: [{
name: '', 我
adds: '', 在
tel: '', 这
}], 里
- v-for进行循环，这一步对我来说比较难得就是v-model了，但现在看来就是一种顺其自然的舒心。(希望你也能体会到这种感觉)
<div class="main" v-for="(item, index) in items">
<div class="main-name">
<input type="text" v-model="item.name" :value="item.name">
</div>
<div class="main-adds">
<input type="text" v-model="item.adds" :value="item.adds">
</div>
<div class="main-tel">
<input type="text" v-model="item.tel" :value="item.tel">
</div>
<div class="main-btn">
<button @click="add(index)" v-if="index===len">O</button>
<button @click="del(index)" v-else>X</button>
</div>
</div>
- 把增加删除方法写上。在这里我们还需要写上获取数组长度的方法以便调用，因为我们要判断在最后一个的时候显示添加按钮，另一个原因是v-for时貌似获取不了这个长度。
methods: {
del: function(index) {
this.items.splice(index, 1);
this.geLength();
},
add: function(index) {
this.items.splice(index, 0, {
name: '',
adds: '',
tel: '',
});
this.geLength();
},
geLength: function() {
this.len = this.items.length - 1;
}
},
created: function() {
this.geLength();
}
大概就是这些了，想自己动手尝试的同学可以点击这里
如果大家还有更好的方式，还请赐教，
代码拙劣，如有错误，望指出。
本人原创 如需转载请注明出处
