在使用阿里的 Ant Design Vue 框架时,需要自定义一下 a-select
如果需要完全自定义下拉框,直接重写 dropdownRender 即可:
如果只是需要在官方当前的样式上加点自定义的东西,官方文档里面有现成的效果
官方默认效果是这样的:
默认自定义dom是在底部的,但是如果需要将下面的自定义dom放到头部,其实很简单,只需要这样修改即可
<a-select default-value="lucy" style="width: 120px">
<div slot="dropdownRender" slot-scope="menu">
<div
style="padding: 4px 8px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
@click="addItem"
>
<a-icon type="plus" /> Add item
</div>
<a-divider style="margin: 4px 0;" />
<!-- 将 v-nodes 移到下面即可,相当于自定义dom部分从下网上渲染 -->
<v-nodes :vnodes="menu" />
</div>
<a-select-option v-for="item in items" :key="item" :value="item">{{ item }}</a-select-option>
</a-select>
效果: