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

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

那你还不如自己写个 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>

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7773977
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：谈谈ant-design-vue中的下拉选择框select组件的使用
• 除此之外, 这篇博客: Ant design Vue中的a-select赋值取值中的 5.※回显※ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• methods: {
  show1() {
  	query(xxxxxxxxx).then(res => {
  		this.$set(this.Form, 'dataAuth', res.result.data)
          })
      }
  }
  

  
  这是后端工程师给你的，他将以这种样子返回给你数据