微信小程序，动态渲染的控件赋值问题
题目描述
给input赋值，按照常规的方式是在js的data里面定义一个变量，然后在input控件的value绑定这个预先定义好的变量，后面给这变量赋值就可以，将输入的内容显示在控件上了
现在我的需求因为是 控件都是通过后端表单数据动态渲染的，这里就没法预先给控件的value进行定义变量，所以问题就来了，没法在输入的时候把输入的内容赋值给控件value
题目来源及自己的思路
相关代码
wxml部分：
<van-toast id="van-toast" /><van-dialog id="van-dialog" />
<form bindsubmit="dataSubmit">
<scroll-view id="form" style="height:calc(100% - 55px);" scroll-y>
<van-collapse value="{{ collapseNames }}" bind:change="collapseChange">
<van-collapse-item name="1">
<view slot="title" style="display:flex;">
<view class="collapse-title-sign"></view>
<view class="title-text">表单录入数据</view>
</view>
<view wx:for="{{entryFormList}}" wx:key="businessTableFieldId" >
<van-field label="{{item.fieldName}}"
type="{{item.controlType !== null && item.controlType !=='' ? item.controlType:''}}"
input-align="right" name="{{item.columnName}}" required="{{ item.isRequired==='是' }}" value="{{item.columnName.toLowerCase()}}"
label-class="field-class"
placeholder="{{item.isRequired==='是'?'必填;':''}}{{item.dataLength>0?'小于等于'+item.dataLength+'字;':''}}{{item.minValue!==null&&item.minValue!==''?'值大于等于'+item.minValue+';':''}}{{item.maxValue!==null&&item.maxValue!==''?'值小于等于'+item.maxValue+';':''}}"
data-fieldName='{{item.fieldName}}'
data-dataType='{{item.dataType}}'
data-fieldId='{{item.businessTableFieldId}}'
data-dictionaryValue='{{item.dictionaryValue}}'
bindtap="fieldClick"
is-link="{{item.fieldName==='部门'||item.dataType===40||item.dataType===50||item.dataType===60}}"
readonly="{{item.fieldName==='部门'||item.dataType===40||item.dataType===50||item.dataType===60}}"
>
<van-icon wx:if="{{item.fieldDescribe.length>0}}" slot="right-icon" color="#128EFF" name="question-o" data-fieldDescribe='{{item.fieldDescribe}}' bind:click="showDescription" />
</van-field>
<!-- 部门 -->
<van-popup wx:if="{{item.fieldName==='部门'}}" show="{{ department_show }}" position="bottom">
<department-select-single id="department_select_single" select_id="{{ department_id }}"
bind:onOkOrCancel="department_confirm">
</department-select-single>
</van-popup>
<!-- 日期 -->
<van-popup show="{{ data_time_show }}" position="bottom" bind:close="data_time_close">
<van-datetime-picker type="date" value="{{ data_time }}" min-date="{{ data_time_min }}"
max-date="{{ data_time_max }}" bind:confirm="data_time_confirm" bind:cancel="data_time_close" />
</van-popup>
</view>
<!-- 时间 -->
<van-popup show="{{ time_show }}" position="bottom" bind:close="time_close">
<van-datetime-picker type="datetime" value="{{timevalue}}" formatter="{{ formatter }}"
min-date="{{time_min}}" max-date="{{time_max}}"
bind:confirm="time_confirm" bind:cancel="time_close" />
</van-popup>
<!-- 下拉选择项 -->
<van-popup show="{{ dropdown_show }}" position="bottom">
<van-picker columns="{{ dropdownOptions }}" show-toolbar="true"
bind:change="onDropdownChange" bind:cancel="onDropdownCancel"
bind:confirm='onDropdownConfirm' />
</van-popup>
</van-collapse-item>
</van-collapse>
</scroll-view>
<view class="submit-button">
<van-button form-type="submit" round type="info" custom-style="width:90%;margin-left:5%;">
提交
</van-button>
</view>
</form>
js代码：
Page({ data: {
mes_url: '',
operator_id: '',
collapseNames: ['1','2','3'],
businessTableId:'',
entryFormList:[],
dataType:'text',
error_count: 0,
department_id: '', //部门ID
department_title: '', //部门名称
department_show: false, //部门选择框show
department_invalid: '', //部门报错信息
data_time: new Date().getTime(), //日期
data_time_min: '',
data_time_max: new Date().getTime(),
data_time_string: moment(new Date()).format('YYYY-MM-DD'), //日期字符串
data_time_invalid: '', //日期报错信息
data_time_show: false, //日期选择框show
time_show:false,
timevalue:new Date().getTime(),
time_max:new Date().getTime(),//当前时间
time_min:'',//昨天0点
dropdown_show:false,
dropdownOptions:[],
formatter(type, value) {
if (type === 'day') {
return value.length===1?`$0{value}`:value
} else if (type === 'hour') {
return value.length===1?`$0{value}`:value
} else if (type === 'minute') {
return value.length===1?`$0{value}`:value
}
return value;
}, //时间选择器格式
},
onLoad(options) {
let that = this;
let mes_url = getApp().globalData.config.mes_url;
let userInfo = wx.getStorageSync('userInfo');
let businessTableId=options.businessTableId;
this.setData({
mes_url: mes_url,
operator_code:userInfo.operator_code,
operator_name:userInfo.operator_name,
operator_phone:userInfo.mobile_phone,
businessTableId:businessTableId
});
wx.getStorage({
key: 'userInfo',
success(res) {
that.setData({
operator_id: res.data.operator_id
});
//加载表单录入详情
that.selectEntryFormDetail(mes_url,businessTableId);
},
})
},
selectEntryFormDetail(url,businessTableId){
var that=this;
wx.request({
url: url + '/CustomDataCollection/CustomDataCollection/GetFieldList',
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded',
'accept': 'application/json'
},
data: {
businessTableId: businessTableId
},
success (res) {
var data = res.data;
if (data.success) {
that.setData({
entryFormList:data.resultList,
});
}
else {
Toast(data.body);
}
},
complete: () => {
wx.hideLoading();
}
})
},
onDropdownCancel(){
this.setData({
dropdown_show: false
})
},
/*配送考核更改*/
onDropdownChange(event){
const { picker, value, index } = event.detail
this.setData({
dropdown_show: false,
// delivery_kpi_type_name:value.text,
})
},
/*配送考核确认*/
onDropdownConfirm(event){
const { picker, value, index } = event.detail
this.setData({
dropdown_show: false,
// delivery_kpi_type_name:value.text,
})
},
/*折叠页change*/
collapseChange(event) {
this.setData({
collapseNames: event.detail,
});
},
showDescription(fieldDescribe){
var describe= fieldDescribe.currentTarget.dataset.fielddescribe;
if(describe!==null&&describe!==''){
Toast(describe);
}
},
time_close() {
//var title = this.data.last_arrive_datatime_string;
var title = '';
if (title == null || title == undefined || title == ''){
var last_arrive_datatime = new Date().getTime();
this.setData({
timevalue: last_arrive_datatime,
time_show: false,
});
} else {
var last_arrive_datatime = new Date(title).getTime();
this.setData({
timevalue: last_arrive_datatime,
time_show: false
})
}
},
time_confirm(value) {
let error_count = this.data.error_count;
//let error_exist = this.data.last_arrive_datatime_invalid.length > 0;
if (value.detail == null || value.detail == undefined) {
this.setData({
//last_arrive_datatime_string: '',
timevalue: null,
time_show: false,
//last_arrive_datatime_invalid: '请选择日期',
//error_count: error_exist ? error_count : (error_count + 1)
})
} else{
this.setData({
//last_arrive_datatime_string: last_arrive_datatime_string,
timevalue: value.detail,
time_show: false,
})
}
},
fieldClick(obj){
var fieldname= obj.currentTarget.dataset.fieldname;
var dataType=obj.currentTarget.dataset.datatype;
//给选择项绑定数据源
var dictionaryValue=obj.currentTarget.dataset.dictionaryvalue;
if(dataType===60){
let type = [];
if(dictionaryValue!=null&&dictionaryValue!==''){
dictionaryValue.split(',').forEach(e => {
let obj = {};
obj.value = e;
obj.text = e;
obj.selected = false;
type.push(obj);
});
}
this.setData({
dropdownOptions:type
})
}
this.setData({
department_show: fieldname==='部门',
data_time_show: dataType===40, //日期类型
time_show: dataType===50, //时间类型
dropdown_show: dataType===60 //选择项
})
},
/*生产部门confirm*/
department_confirm (params) {
let { status, selectedDepartment } = params.detail;
let error_count = this.data.error_count;
let error_exist = this.data.department_invalid.length > 0;
//改变查询参数 + 弹框关闭
if (status == 'ok') {
//用于区域部门控件的数据回显
if (selectedDepartment.id == null || selectedDepartment.id == undefined) {
this.setData({
department_id: '',
department_title: '',
department_show: false,
department_invalid: '请选择仓库',
error_count: error_exist ? error_count : (error_count + 1)
});
} else {
this.setData({
department_id: selectedDepartment.id,
department_title: selectedDepartment.text,
department_show: false,
department_invalid: '',
error_count: error_exist ? (error_count - 1) : error_count
});
}
} else {
//非确认按钮，则数据不变
let { department_id, department_title } = this.data;
this.setData({
department_id: department_id,
department_title: department_title,
department_show: false,
department_invalid: department_title == '' ? '请选择仓库' : ''
})
}
},
/*日期选择框close*/
data_time_close() {
var title = this.data.data_time_string;
if (title == null || title == undefined || title == ''){
var data_time = new Date().getTime();
var error_exist = this.data.data_time_invalid.length > 0;
var error_count = this.data.error_count;
this.setData({
data_time: data_time,
data_time_show: false,
data_time_invalid: '请选择日期',
error_count: error_exist ? error_count : (error_count + 1)
});
} else {
var data_time = new Date(title).getTime();
this.setData({
data_time: data_time,
data_time_show: false
})
}
},
/*日期选择确认*/
data_time_confirm(value) {
let error_count = this.data.error_count;
let error_exist = this.data.data_time_invalid.length > 0;
if (value.detail == null || value.detail == undefined) {
this.setData({
data_time_string: '',
data_time: null,
data_time_show: false,
data_time_invalid: '请选择日期',
error_count: error_exist ? error_count : (error_count + 1)
})
} else{
var data_time_string = moment(new Date(value.detail)).format('YYYY-MM-DD');
this.setData({
data_time_string: data_time_string,
data_time: value.detail,
data_time_show: false,
data_time_invalid: '',
error_count: error_exist ? (error_count - 1) : error_count
})
}
},
})
你期待的结果是什么？实际看到的错误信息又是什么？
以上是 微信小程序，动态渲染的控件赋值问题 的全部内容， 来源链接： utcz.com/p/936925.html
