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
      }
    },
  }
posted @ 2021-06-25 11:00  MELANCHOLYS  阅读(1365)  评论(0编辑  收藏  举报