vue商品分类选择一排放置代码超级美观element-plus

可以使用 Element Plus 提供的 Cascader 组件来实现商品分类选择一排放置，并且可以使用 Element Plus 提供的样式来美化组件。

以下是示例代码：

<template>
  <div class="category-select">
    <el-cascader
      :options="options"
      v-model="selected"
      :props="{ label: 'name', value: 'id', children: 'children' }"
      size="medium"
      placeholder="请选择分类"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          name: '电子产品',
          children: [
            {
              id: 11,
              name: '手机',
              children: [
                { id: 111, name: '小米' },
                { id: 112, name: '华为' },
                { id: 113, name: '苹果' },
              ],
            },
            {
              id: 12,
              name: '电脑',
              children: [
                { id: 121, name: '联想' },
                { id: 122, name: '戴尔' },
                { id: 123, name: '华硕' },
              ],
            },
          ],
        },
        {
          id: 2,
          name: '服装鞋帽',
          children: [
            { id: 21, name: '男装' },
            { id: 22, name: '女装' },
            { id: 23, name: '童装' },
          ],
        },
        {
          id: 3,
          name: '家居家纺',
          children: [
            { id: 31, name: '家具' },
            { id: 32, name: '家饰' },
            { id: 33, name: '床上用品' },
          ],
        },
      ],
      selected: [],
    };
  },
};
</script>

<style>
.category-select .el-cascader {
  width: 100%;
}
</style>

上述代码中，我们使用了 Element Plus 提供的 Cascader 组件来实现商品分类选择一排放置。在组件中，我们通过 `:options` 属性来指定分类的选项，使用 `v-model` 属性来绑定选择的结果，使用 `:props` 属性来指定选项中的 label、value 和 children 字段。我们还设置了组件的大小为 medium，并设置了 placeholder 文字。最后，我们使用了自定义的样式来美化组件的宽度。