Vue antdv a-select 自定义 dropdownRender 的内容放到头部

• 在使用阿里的 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>
  

• 效果：