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)

可以說是很便利了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM