如图,最近项目需求,点击添加一行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);
},
}

好啦,大功告成!!

最新文章

  1. zookeeper原理及作用
  2. 使用EF Oracle实现DevExpress绑定大数据的ServerMode模式
  3. MVC的自定义动作过滤器(一)
  4. 某网SQL注入漏洞实战
  5. C++检测一个文件是否存在
  6. Selenium IDE测试创建
  7. AngularJS实现表单手动验证和表单自动验证
  8. Tomcat从零开始(十一)WebappLoader概述
  9. ArcGIS Pro 简明教程(4)工具和模型构建器
  10. HTML Input属性
  11. Java8-初识Lambda
  12. Python编码与变量
  13. vuejs项目---配置理解:
  14. Luogu 2680 NOIP 2015 运输计划(树链剖分,LCA,树状数组,树的重心,二分,差分)
  15. 洛谷4951 地震 bzoj1816扑克牌 洛谷3199最小圈 / 01分数规划
  16. css控制英文内容自动换行問題
  17. 【转载】WCF 客户端识别认证之UserName认证
  18. three的初步探索之表象篇
  19. 剑指Offer——左旋转字符串
  20. linux一键安装mysql脚本

热门文章

  1. 生产管理ERP哪一款比较好?
  2. c#-03关于类和继承的基本知识
  3. DateSet的应用
  4. 2022.3.12 提高A组总结&amp;反思
  5. 堆内存动态分配情况和jvm调优方向
  6. (Java初学篇)IDEA项目新建流程和软件配置优化以及怎么彻底删除项目
  7. JavaScript事件驱动
  8. Linux系统管理_网络管理
  9. NLP之基于Bi-LSTM和注意力机制的文本情感分类
  10. Spring事务传播行为实战