类似表格的添加与删除

这是吐槽，可以跳过的，刚学习vue的时候用的第一个框架是elementUI，真的是爱不释手，公司的业务要求也没那么多，基本都能满足，现在不一样了，啥都得自己写了。怎么说呢，幸与不幸，幸运的是能够自己多动手动脑了，不幸的是貌似脑子不够用的。。。。
这个类表格，为什么要类表格呢？他虽然可以做成table,但因为很多人感觉table太low，所以大家都不怎么用，领导也不让用，于是我就用了这个类表格的称呼。
在一些业务场景中我们得让用户能对类表格能增加删除，假如我们用的是jQuery，这就是简单的字符串拼接和事件绑定，中间会有点小波折，比如事件委托（刚开始是真的头疼）。但是我们现在用的vue，我们不应该再去拼接一坨字符串，我们只要操作数据就行了，我的思路如下：

1. 创建一个数组对象

 items: [{
        name: '',   我
        adds: '',   在
        tel: '',    这
      }],           里

2. 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>

3. 把增加删除方法写上。在这里我们还需要写上获取数组长度的方法以便调用，因为我们要判断在最后一个的时候显示添加按钮，另一个原因是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();
  }

大概就是这些了，想自己动手尝试的同学可以点击这里

如果大家还有更好的方式，还请赐教，

代码拙劣，如有错误，望指出。

本人原创 如需转载请注明出处