1. 程式人生 > 其它 >vue動態生成下拉框,輸入框值通過model雙向繫結獲取

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)

可以說是很便利了。