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
。