环境
小程序 UI 组件： Vant Weapp
index.wxml
在index.wxml文件中编写主要的结构代码，例如添加、删除按钮。
内心os：你都用UI组件了，为啥还要用官方的picker组件？？？表单组件 /picker
我：一开始我也是这样想的，但使用van-picker确实是可以实现。但我遇到了其他的问题（多个van-picker选中数据会覆盖之前选中的数据），之后换成picker完美解决问题。
<view class="view-btn"><van-button class="view-btn-add" type="primary" size="small" bindtap="addList">添加项</van-button><van-button type="warning" size="small" bindtap="delList">删除项</van-button></view><block wx:for="{{lists}}" wx:for-item="item" wx:key="{{index}}"><view class='picker-view'><picker bindchange="bindPickerChange" value="{{item.mainRiskVal}}" range="{{mainRiskList}}" range-key="{{'name'}}" data-main-id="{{index}}" data-main-risk-list="{{mainRiskList}}"><view class="picker-view-item"><block wx:if="{{mainRiskList[item.mainRiskVal].name == '' || mainRiskList[item.mainRiskVal].name == null}}"><view>请选择主要类型</view> </block><block wx:else><view>主要类型</view> </block><view>{{mainRiskList[item.mainRiskVal].name}}</view></view></picker></view><van-field bind:blur="onConfirmControlMeasures" value="{{ item.remark }}" data-main-id="{{index}}" label="备注" type="textarea" placeholder="请输入备注描述" clearable autosize="{{ autosize }}" /></block>
index.js
在index.js文件中，实现点击"添加项"按钮添加一个表单（包含输入框和下拉框），点击"删除项"按钮删除一个表单（包含输入框和下拉框）。
注意：在下拉框选中后获取选中的数据问题
Page({/*** 页面的初始数据*/data: {autosize: {maxHeight: 100,minHeight: 50},mainRiskList: [],lists: [{mainRiskVal: '',mainRisk: '', // 主要类型编号mainRiskCn: '',// 主要类型名称remark: '', // 备注}],},// 添加选项addList: function(){let lists = this.data.lists;let newData = {mainRiskVal: "",mainRisk: "",mainRiskCn: "",remark: ""};lists.push(newData);this.setData({lists: lists,});},// 删除选项delList: function () {let lists = this.data.lists;// 至少保留一项if(lists.length > 1){lists.pop();}this.setData({lists: lists,});},//获取主要类型列表数据onLoadMainRiskList(){const that = this;wx.showLoading();// dataDictionaryType是封装后的请求方法dataDictionaryType({params: params}).then((res) => {wx.hideLoading();if(res){if(res.length > 0){const dictList = [];res.forEach(function(item, index){const dictObj = {};dictObj.id = item.id;dictObj.name = item.name;dictList.push(dictObj);});that.setData({mainRiskList: dictList });}}});},// 下拉选择事件bindPickerChange: function(e) {let mainId = e.currentTarget.dataset.mainId;let mainRiskList = e.currentTarget.dataset.mainRiskList;const {value } = e.detail;let oldList = this.data.lists;if(oldList && oldList.length > 0){for(let i= 0; i< oldList.length; i++){// 获取选中的类型名称和编号if(i == mainId){oldList[i].mainRiskVal = value;oldList[i].mainRisk = mainRiskList[parseInt(value)].id;oldList[i].mainRiskCn = mainRiskList[parseInt(value)].name;break;}}this.setData({showMainRisk: false, lists: oldList,});}},// textarea失去焦点后获取输入框的数据onConfirmControlMeasures(e){let mainId = e.currentTarget.dataset.mainId;const {value } = e.detail;let oldList = this.data.lists;if(oldList && oldList.length > 0){for(let i= 0; i< oldList.length; i++){if(i == mainId){oldList[i].remark = value;}}this.setData({lists: oldList,});}},})
index.wxss
.view-btn{text-align: center;margin: 20rpx;}.view-btn-add{margin:0 50rpx;}.picker-view {margin: 10rpx 25rpx;font-size: 14px;}.picker-view-item{width: 100%;box-sizing: border-box;padding: 10rpx;display: flex;flex-wrap: wrap;justify-content: space-between;}
