AntDesign的select组件placeholder不显示问题

当前组件挂载数据值为undefined时placeholder才会显示的替换文本,当组件绑定了v-model即使初始化为" "也视为有值,所以placeholder自然就不会显示。

解决方案:初始化时将v-model绑定的值改为undefined,而不是" "

原始问题记录如下:

在这里插入图片描述

// 界面代码
  <a-form layout="inline">
    <a-form-item label="时间范围">
      <a-range-picker @change="onSearch" v-model="searchParams.dateRange"/>
    </a-form-item>
    <a-form-item label="查询">
      <a-input-group compact>
        <a-select
          style="width: 160px;"
          v-model="searchParams.property"
          show-search
          placeholder="请选择属性"
          @change="handleChange">
          <a-select-option :value="1">接口名</a-select-option>
          <a-select-option :value="2">配网随机数</a-select-option>
        </a-select>
        <a-select
          style="width: 160px;"
          v-model="searchParams.status"
          show-search
          placeholder="请选择状态代码"
          @change="handleChange">
          <a-select-option :value="1">接口名</a-select-option>
          <a-select-option :value="2">配网随机数</a-select-option>
        </a-select>
      </a-input-group>
    </a-form-item>
  </a-form>
// 挂载数据如下
data () {
    
    
    return {
    
    
      searchParams: {
    
    
        dateRange: '', 
        property: '', // 为空并不等于undefined,改为undefined就能正常显示
        status: undefined // 正常显示placeholder
      } 
    }
  },

参考文章:https://blog.csdn.net/qq_42177478/article/details/109001859

猜你喜欢

转载自blog.csdn.net/weixin_43361722/article/details/113975656