类似表格的删除与添加

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

  1. 创建一个数组对象
 items: [{
        name: '',   我
        adds: '',   在
        tel: '',    这
      }],           里
  1. 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>
  1. 把增加删除方法写上。在这里我们还需要写上获取数组长度的方法以便调用,因为我们要判断在最后一个的时候显示添加按钮,另一个原因是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();
  }

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

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

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

本人原创 如需转载请注明出处
http://bestzhengke.com/2017/1…

    原文作者:Denny_coder
    原文地址: https://segmentfault.com/a/1190000012511100
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞