[移动开发]微信小程序 | 实现动态增加或删去某一行input内容

需求：
实现实习岗位的上传功能。
难点：
其中有两个部分“岗位职责”和“岗位要求”是数组结构。上传信息的管理者在上传中可以对某一行进行删除或添加操作，调整数组中的信息。
成果：

HTML部分代码

    <view class="work_request">
      <view class="subtitle">【岗位要求】</view>
      <!-- 循环目标数组 -->
      <block wx:for="{{work_request}}" wx:key="index">
        <view class="work_intro_item">{{index+1}}.
        <!-- 这里input需要绑定一个bindinput，将数据写到数组中去 -->
          <input class="text" maxlength="-1" placeholder="岗位要求" bindinput="inputRequest" data-index="{{index}}"
            value="{{work_request[index]}}"></input>
            <!-- 增删按钮 -->
          <view class="button">
            <view class="add" bindtap="addrequest">+</view>
            <view class="minus" bindtap="minusrequest" data-index="{{index}}">-</view>
          </view>
        </view>
      </block>
    </view>
    <view class="salary_detail">
      <view class="subtitle">【薪资情况】</view>
      <!-- 循环目标数组 -->
      <block wx:for="{{salary_detail}}" wx:key="index">
        <view class="work_intro_item">{{index+1}}.
        <!-- 这里input需要绑定一个bindinput，将数据写到数组中去 -->
          <input class="text" maxlength="-1" placeholder="薪资情况" bindinput="inputSalary" data-index="{{index}}"
            value="{{salary_detail[index]}}"></input>
            <!-- 增删按钮 -->
          <view class="button">
            <view class="add" bindtap="addsalary">+</view>
            <view class="minus" bindtap="minussalary" data-index="{{index}}">-</view>
          </view>
        </view>
      </block>
    </view>

CSS部分代码

.subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #5c5a5a;
  width: 200rpx;
}
.work_intro,.work_request{
  padding-bottom: 20px;
}
.work_intro_item {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.button{
  display: flex;
  font-size: 30px;
  
}
.add{
  color: red;
}
.minus{
  color: blue;
}

JS部分代码

  /**
   * 页面的初始数据
   */
  data: {
    work_intro:[''],
    work_request:['']
  },
    // 输入绑定事件
  inputIntro:function (e) {
    let index = e.currentTarget.dataset.index
    let work_intro = this.data.work_intro
    work_intro[index] = e.detail.value
    this.setData({
      work_intro:work_intro
    })
  },
  inputRequest:function (e) {
    let index = e.currentTarget.dataset.index
    let work_request = this.data.work_request
    work_request[index] = e.detail.value
    this.setData({
      work_request:work_request
    })
  },
  // 点击增加按钮
  addline:function () {
    let work_intro = this.data.work_intro
    work_intro.push('')
    this.setData({
      work_intro:work_intro
    })
  },
  addrequest:function () {
    let work_request = this.data.work_request
    work_request.push('')
    this.setData({
      work_request:work_request
    })
  },
  // 点击删除按钮
  minusline:function (e) {
    let index = e.currentTarget.dataset.index
    let work_intro = this.data.work_intro
    work_intro.splice(index,1)
    this.setData({
      work_intro:work_intro
    })
  },
  minusrequest:function (e) {
    let index = e.currentTarget.dataset.index
    let work_request = this.data.work_request
    work_request.splice(index,1)
    console.log(index,work_request)
    this.setData({
      work_request:work_request
    })
  },
  //上传时组合数据
    formSubmit: function (e) {
    let data = e.detail.value
    let work_intro = this.data.work_intro.map((item,index)=>{
      item = (index+1)+'.'+item
      return item
    })
    let work_request = this.data.work_request.map((item,index)=>{
      if(item!==''){
        item = (index+1)+'.'+item
        return item
      }
    })
    let newIntern = Object.assign(
      data,
      {work_intro: work_intro},
      {work_request:work_request}
      )
    
    wx.cloud.database().collection('internlist').add({
      data:newIntern,
      success:res=>{
        console.log(res)
        wx.showToast({
          title: '上传成功',
        })
      }
    })
  },