ant-design-vue中select跟tree-select设置placeholder无效

Posted 2022-12-13 ㄏ、Forgetˊ

博主在使用ant-design-vue过程中，踩了非常多的坑，今天就部分组件的placeholder设置无效做记录。

失效示例代码及界面

<a-checkbox-group :options="descCheckOptions" @change="handleChangeDescCheckGroup">
  <div class="desc-checkitem" slot="label" slot-scope=" index, value, list ">
    <span class="label"> value </span>
    <a-select
      @change="generateDescTable()"
      v-if="index != 5"
      v-model="descCheckOptions[index].checkedValue"
      :placeholder="
        index === 0
          ? '材料'
          : index === 1
          ? '袖型'
          : index === 2
          ? '腰型'
          : index === 3
          ? '图案类型'
          : '衣服长度'
      "
    >
      <a-select-option :value="item" v-for="(item, index) of list" :key="index">
         item 
      </a-select-option>
    </a-select>
    <a-tree-select
      v-else
      :treeData="list"
      v-model="descCheckOptions[index].checkedValue"
      treeCheckable
      @change="generateDescTable()"
      placeholder="适合场合"
    />
  </div>
</a-checkbox-group>

其中select组件，tree-select组件的v-model绑定值为''空值，页面渲染结果如下图：

最后一个select框为tree-select，可以看到所有select框都没有渲染placeholder，且tree-select还有一个默认的空选择。

解决方案

博主在经过测试后，发现其placeholder的渲染与v-model的绑定值有关，在将所有绑定值由''改为null之后，tree-select能够正常显示placeholder，但是select组件仍然不行。

博主想到除了null还有一个undefined，故也做了尝试，没想到成功了~~

总结

select与tree-select组件设置placeholder的时候，如果绑定的是v-model，select需设置其绑定值为undefined，tree-select需设置其绑定值为undefined或者null。
假如说你使用的是a-from组件来包裹这两个组件，不用v-model而使用v-decorator进行绑定值，可以直接设置placeholder，但是博主案例中是使用循环来渲染的，所以只能采用v-model。