vue动态生成下拉框,输入框值通过model双向绑定获取
<a-card :bordered="false"> <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> <a-form-item :label="item.dictItemName" v-for="(item,index) in listData" :key="index"> <a-select mode="multiple" v-model="item.departIds" placeholder="请选择" @change="handleSelectChange" @popupScroll="popupScroll"> <a-select-option v-for="i in item.departList" :key="i.id"> {{ i.departName }} </a-select-option> </a-select> </a-form-item> <a-form-item :wrapper-col="{ span: 12, offset: 5 }"> <a-button type="primary" @click="handleSubmit"> 保存 </a-button> </a-form-item> </a-form> </a-card>
v-model="item.departIds" 这个地方会自动双向绑定数据,可以动态获取
data() { return { projectId: Vue.ls.get(USER_PROJECTID), //当前节点项目id listData: [], } },
这样子可以操作数据
let dtoList=[] this.listData.forEach(element => { let dto = { departIds:element.departIds, departLabel:element.departLabel, departUse:element.departUse, projectId:this.projectId } dtoList.push(dto) }); console.log(dtoList)
可以说是很便利了。