需求背景:根据后台返回的数据动态渲染picker,radio,textarea三种类型表单控件。
下面用到了uniapp的uni-forms、uni-datatime-picker拓展插件,有需要的小伙伴可以去uniapp官网下载。
<uni-forms :modelValue="formData" ref="form"><view class="flex-column" v-for="(item, i) in formData.questionList" :key="i"><pickerv-if="item.questionType == 'select'"@change="PickerChange(i, $event)":value="selectIndex[i]"range-key="optionText":range="item.optionList"><view class="uni-input">{
{item.optionList[selectIndex[i]]? item.optionList[selectIndex[i]].optionText: ""}}<i class="iconkechengjiaoxuecopy49beifen2x iconfont link" /></view>
</picker>
export default {data() {return {formData: {},selectIndex: [],};},methods:{//这里我是从后台拿到的数据this.$request.get(`/appraise/1504393143817334785`).then((res) => {this.formData = res;this.selectIndex.push();});PickerChange(i, e) {this.$set(this.selectIndex, i, e.target.value);},}
}