小程序中实现添加/删除列表

需求：

实现一个可以添加和删除列表的类似‘采购’功能，如下图：

思路：

要实现动态添加和删除可以定义一个商品列表的数组 goodsList 页面中，当需要添加商品时，向该数组添加 push 一个对应项（可自行定义），删除时删除 splice 数组中对应项即可。

存在问题：

针对列表中每一项的输入框，在输入后删除当前项时，并不会将当前项中内容删除，而是复用（删除了最后一项），并不能实现定点删除。解决方法：将每一个输入项都存入对应数组中，且在删除项时，对每一个存数据的数组做相应的删除 splice 操作。

代码如下：

wxml：

<view wx:for="{{goodsList}}" wx:key="{{index}}" class='goodsList'>
    <view class='goodsListTitle'>
        <view>
            商品明细{{index+1}}
          </view>
          <view>
            <view wx:if="{{goodsList.length>1}}" catchtap='remove' data-index="{{index}}" class="remove">
              删除
            </view>
          </view>
        </view>
        <view class='item'>
          <view class='title'>
            商品名称
          </view>
          <view class='bk'>
            <input name='' value='{{nameList[index]}}' data-index='{{index}}' placeholder="请输入商品名称" maxlength='10' bindinput='inputName'/>
          </view>
        </view>
</view>

其中：goodsList 就是当前列表有多少项，当增加时，可以向该数组随意添加一个项（目的在于增加数组的项）

js：
增加列表项：

add() {
    let oldgoodsList = this.data.goodsList
    oldgoodsList.push("td")
    this.setData({
      goodsList: oldgoodsList,
    })
  },

删除列表项：

remove(e) {
    let index = e.currentTarget.dataset.index  // 获取当前项的index
    let oldgoodsList = this.data.goodsList
    oldgoodsList.splice(index, 1)  // 执行删除操作
    let oldnameList = this.data.nameList
    oldnameList.splice(index, 1)
    this.setData({  // 重新赋值
      goodsList: oldgoodsList,
      nameList: oldnameList
    })
  },

针对上边存在问题的解决方法，js：

inputName: function(e){
    let index = e.currentTarget.dataset.index
    let nameList = this.data.nameList
    nameList[index] = e.detail.value // 在第几项填写内容，就在数组中给对应项赋值
    this.setData({
      nameList: nameList
    })
  },

就是在输入的，将当前输入的结果存入对应数组中，且在 wxml 中 input 标签内 value='{{nameList[index]}}' 这样在删除其中某一项时，就不会出现无法删除对应项的bug了。

注意：
当需要进行非空判断时，需要另行处理。如果有三项时，只填写第一和第三项，在控制台打印出对应数组。

并且打印出第二项

但是其中第二项并不为“undefined”，是为空。只不过控制台输出如此。该数组成为稀疏数组
可以通过将该数组转为字符串，然后再分割为数组后进行非空判断。
that.data.nameList.join("@").split("@").indexOf("") 进行判断。