如何使用ant design vue写一个九宫格下拉框

Question

现在遇到一个需求，希望下拉框为九宫格样式，内容为图标，可以点击图标，就像select框一样的功能，但是下拉框展示为九宫格

Answer 1

那你还不如自己写个 select组件呢 。改 ui库的更麻烦 。
不过 我看 api 里有个 #dropdownRender 可以自定义 内容 你可以尝试一下 写个九宫格试试

或者：
使用Ant Design Vue可以很方便地实现一个九宫格下拉框。你可以使用组件来包裹九宫格内容，使用<Dropdown.Button>组件来渲染九宫格的触发按钮，使用组件来渲染九宫格内容。以下是一个简单的示例代码：

<template>
  <div>
    <a-dropdown>
      <a-dropdown-button>
        <span>九宫格下拉框</span>
        <a-icon type="down" />
      </a-dropdown-button>
      <a-menu slot="overlay">
        <a-menu-item-group title="九宫格内容">
          <a-menu-item v-for="item in gridData" :key="item.key" @click="handleMenuClick(item)">
            <a-icon :type="item.icon" />
            <span>{{item.title}}</span>
          </a-menu-item>
        </a-menu-item-group>
      </a-menu>
    </a-dropdown>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gridData: [
        { key: '1', icon: 'user', title: '用户管理' },
        { key: '2', icon: 'tag', title: '标签管理' },
        { key: '3', icon: 'setting', title: '设置' },
        { key: '4', icon: 'profile', title: '个人资料' },
        { key: '5', icon: 'logout', title: '退出登录' }
      ]
    }
  },
  methods: {
    handleMenuClick(item) {
      console.log('你点击了', item.title)
    }
  }
}
</script>