vue商品分类选择一排放置代码美观好看

以下是一个简单的实现可供参考：

<template>
  <div class="category-selector">
    <div class="category-selector__item" v-for="(category, index) in categories" :key="index">
      <div class="category-selector__name" @click="toggleCategory(index)">{{ category.name }}</div>
      <div class="category-selector__options" v-show="category.expanded">
        <div class="category-selector__option" v-for="(option, optionIndex) in category.options" :key="optionIndex">
          <input type="checkbox" :id="option.value" :value="option.value" v-model="selectedOptions">
          <label :for="option.value">{{ option.label }}</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          name: 'Category 1',
          expanded: false,
          options: [
            { label: 'Option 1-1', value: '1-1' },
            { label: 'Option 1-2', value: '1-2' },
            { label: 'Option 1-3', value: '1-3' }
          ]
        },
        {
          name: 'Category 2',
          expanded: false,
          options: [
            { label: 'Option 2-1', value: '2-1' },
            { label: 'Option 2-2', value: '2-2' },
            { label: 'Option 2-3', value: '2-3' }
          ]
        }
      ],
      selectedOptions: []
    }
  },
  methods: {
    toggleCategory(index) {
      this.categories[index].expanded = !this.categories[index].expanded
    }
  }
}
</script>

<style>
.category-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-selector__item {
  display: flex;
  flex-direction: column;
  width: 150px;
}

.category-selector__name {
  font-weight: bold;
  cursor: pointer;
}

.category-selector__options {
  display: none;
  flex-direction: column;
  gap: 5px;
}

.category-selector__option {
  display: flex;
  align-items: center;
}

.category-selector__option label {
  margin-left: 5px;
}
</style>

这个代码实现了一个简单的商品分类选择器，包含了多个类别和每个类别下的选项。当点击类别名称时，该类别下的选项会展开或收起。同时，每个选项都是带有复选框和标签的。你可以根据自己的需求进行修改和调整样式。