ant vue a-select中placeholder無效


a-select中placeholder設置無效的解決辦法(兩種情況)。
最近使用ant vue中的a-select,我發現設置placeholder在下拉框中不起效,我看了官方的例子,發現官方例子中placeholder沒有配合label-in-value屬性去使用。
官方實列

參數:| labelInValue |
說明:| 是否把每個選項的 label 包裝到 value 中,會把 Select 的 value 類型從 string 變為 {key: string, label: vNodes} 的格式 |
類型:| boolean |
默認值:| false |

方法1

<a-select placeholder="請選擇功能類型"
          v-model="submitObj.operation"
          @change="typeChange">
  <a-select-option v-for="(item, index) in operTypeArr"
                   :key="index"
                   :value="item.dict_entry">{{item.dict_value}}</a-select-option>
</a-select>
 
// 重置表單或初始表單的時候這里的operation也要設置成undefined(placeholder方可起效果)
submitObj: {
  operation: undefined,
  name: '',
  note_explain: ''
}

方法2

  // template標簽中

  <a-form-item label="xxx名稱" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }" >
    <!--querypeopleList.label ? querypeopleList : undefined 這句話可以解決placeholder失效-->
    <!--此處不用v-model,若想使用可通過計算屬性的get和set實現下-->
    <a-select :disabled="postDisabled" placeholder="請選擇xxx" :value="querypeopleList.label ? querypeopleList : undefined" label-in-value @change="PostidChange">
      <a-select-option v-for="(item,index) in queryPostData" :key="index" :value="item.id">
        {{item.realname}}
      </a-select-option>
    </a-select>
  </a-form-item>

  // data函數中

  data(){
    return{
      querypeopleList:{
        key:'',
        label:''
      },
    }
  }

  //methods方法中

  methods:{
    PostidChange(value){
      let val = value.label.trim()
      this.querypeople.leaderusername=val //xxx名
      this.querypeople.leaderuser=value.key.toString()//xxxid
      //加入label-in-value屬性后,value(v-model)值為對象{key: '',label: ''},每次給value綁定的對象賦值才可回顯渲染到dom中。
      this.querypeopleList={
        key:this.querypeople.leaderuser,
        label:this.querypeople.leaderusername
      }
    },
  }


免責聲明!

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



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