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

ゝ一世哀愁。 2023-02-13 11:59 71阅读 0赞

博主在使用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`绑定值为`''`空值，页面渲染结果如下图：  
![渲染结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg_size_16_color_FFFFFF_t_70]  
最后一个select框为tree-select，可以看到所有select框都没有渲染placeholder，且tree-select还有一个默认的空选择。

## 解决方案 ##

博主在经过测试后，发现其placeholder的渲染与`v-model`的绑定值有关，在将所有绑定值由`''`改为`null`之后，tree-select能够正常显示placeholder，但是select组件仍然不行。  
![由''修改为null后的效果][null]  
博主想到除了`null`还有一个`undefined`，故也做了尝试，没想到成功了~~  
![成功回显placeholder][placeholder]

## 总结 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529120706642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg==,size_16,color_FFFFFF,t_70
[null]: https://img-blog.csdnimg.cn/20200529121128642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg==,size_16,color_FFFFFF,t_70
[placeholder]: https://img-blog.csdnimg.cn/2020052912135442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg==,size_16,color_FFFFFF,t_70