ant design vue 下拉框为九宫格样式

Question

因为下拉框内容为图片，需要将单行转为九宫格形式，方便选择，但是不知道ant如何将下拉框转换，
如果不行，怎么用vue自己写一个下拉框为九宫格的select框？

Answer 1

Ant Design的Select组件无法直接将下拉框转换为九宫格形式。如果需要实现这个功能，可以使用Ant Design的Popover组件和Grid组件配合实现。

具体实现方式如下：

将Select组件替换为Popover组件，并将下拉框的内容作为Popover组件的内容。

在Popover组件中使用Grid组件将下拉框内容按照九宫格的形式排列。

当用户选择某个选项时，关闭Popover组件并将选项的值传递给父组件。

如果你想使用Vue自己写一个下拉框为九宫格的select框，可以参考以下步骤：

创建一个自定义组件，命名为GridSelect。

在GridSelect组件中，使用Grid组件将下拉框内容按照九宫格的形式排列。

在GridSelect组件中，使用v-model指令绑定选项的值，并在选项被选择时触发一个自定义事件。

在父组件中使用GridSelect组件，并监听GridSelect组件的自定义事件，以获取选项的值。
以下是一个示例代码:

<template>
  <div class="grid-select">
    <el-popover
      placement="bottom"
      v-model="isPopoverVisible"
      trigger="click"
      :popper-class="{ 'grid-select-popover': true }"
      @hide="onPopoverHide"
    >
      <el-grid :data="options" :column-num="3" @click="onOptionClick" />
    </el-popover>
  </div>
</template>

<script>
import { ElPopover, ElGrid } from 'element-ui';

export default {
  name: 'GridSelect',
  components: {
    ElPopover,
    ElGrid,
  },
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isPopoverVisible: false,
    };
  },
  methods: {
    onOptionClick(option) {
      this.$emit('input', option.value);
      this.$emit('change', option.value);
      this.isPopoverVisible = false;
    },
    onPopoverHide() {
      this.$emit('blur');
    },
  },
};
</script>

<style scoped>
.grid-select {
  display: inline-block;
}

.grid-select-popover {
  width: 240px;
  padding: 10px;
}

.el-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.el-grid__text {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>

在父组件中使用GridSelect组件：

<template>
  <div class="parent">
    <grid-select v-model="selectedValue" :options="options" @change="onSelectChange" />
  </div>
</template>

<script>
import GridSelect from './GridSelect.vue';

export default {
  name: 'ParentComponent',
  components: {
    GridSelect,
  },
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
        { label: '选项4', value: '4' },
        { label: '选项5', value: '5' },
        { label: '选项6', value: '6' },
        { label: '选项7', value: '7' },
        { label: '选项8', value: '8' },
        { label: '选项9', value: '9' },
      ],
    };
  },
  methods: {
    onSelectChange(value) {
      console.log(value);
    },
  },
};
</script>