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)

可以说是很便利了。

原文地址:https://www.cnblogs.com/njccqx/p/15512105.html