ant-design-vue中select跟tree-select設置placeholder無效

ant-design-vue中select跟tree-select設置placeholder無效

博主在使用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。