vue 點擊按鈕添加一行dom節點

 

 如圖，最近項目需求，點擊添加一行dom節點，包含下拉框和input輸入框 ，下面展示一下代碼

<ul class="sales-menuItem-ul">
            <li class="sales-menuItem-li" v-for="(sub,index) in formdata.data" :key='index' >
              <div>成本{{`${index+1}`}}</div>
              <div class="pur-ret-lime">
                <van-dropdown-menu class="vant-menu" active-color="#1989fa">
                  <van-dropdown-item v-model="sub.value1" :options="option1" />
                </van-dropdown-menu>
                <div class="pur-ret-icon"><img src="../../assets/images/icon_more_g.png" alt=""></div>
              </div>
              <div class="sales-flex flex-betweenCenter"><van-field v-model="sub.number1" type="number" />元/本</div>
            </li>
          </ul>
          <div class="sales-menuItem-addBox"><span class="sales-menuItem-add gr_color" @click="addTags">+添加銷售價格明細</span></div>

return {
      formdata:{
        data:[
          {
            value1: 0,
            number1: 0.5,
          }
        ]
      },
      option1:[
        { text: '材料成本', value: 0 },
        { text: '材料成本2', value: 1 },
        { text: '材料成本3', value: 2 },
      ],
}

methods:{
    addTags(){
      var that = this
      const obj = {
        value1: 0,
        number1: '',
      };
      that.formdata.data.push(obj);
    },
}

 

好啦，大功告成！！