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