<template> <div class="category-select"> <el-cascader v-model="selectedCategory" :options="categoryOptions" placeholder="请选择分类" size="medium" clearable change-on-select ></el-cascader> </div> </template> <script> export default { data() { return { selectedCategory: [], // 选中的分类 categoryOptions: [ { value: 'fruit', label: '水果', children: [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' } ] }, { value: 'vegetable', label: '蔬菜', children: [ { value: 'cabbage', label: '白菜' }, { value: 'carrot', label: '胡萝卜' }, { value: 'tomato', label: '番茄' } ] } ] } } } </script> <style scoped> .category-select .el-cascader__label { background-color: #f0f0f0; border-radius: 4px; padding: 6px 12px; color: #333; font-size: 14px; margin-right: 6px; } .category-select .el-cascader__suffix { font-size: 12px; color: #999; } </style>加好看的css样式

<style scoped>
.category-select .el-cascader__label {
background-color: #f0f0f0;
border-radius: 4px;
padding: 6px 12px;
color: #333;
font-size: 14px;
margin-right: 6px;
}

.category-select .el-cascader__suffix {
font-size: 12px;
color: #999;
}

/* 添加选中后的样式 */
.category-select .el-cascader__label--medium.is-active {
background-color: #409EFF;
color: #fff;
}

.category-select .el-cascader__label--medium.is-active .el-cascader__suffix {
color: #fff;
}
</style>

相关问题

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 文字。最后，我们使用了自定义的样式来美化组件的宽度。

vue商品分类选择一排放置代码超级美观element-plus，加好看的样式

可以使用 element-plus 中的 Cascader 组件来实现商品分类选择一排放置的功能，同时可以通过自定义样式来美化它的外观。

以下是一个示例代码：

<template>
  <div class="category-select">
    <el-cascader
      v-model="selectedCategory"
      :options="categoryOptions"
      placeholder="请选择分类"
      size="medium"
      clearable
      change-on-select
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: [], // 选中的分类
      categoryOptions: [
        {
          value: 'fruit',
          label: '水果',
          children: [
            {
              value: 'apple',
              label: '苹果'
            },
            {
              value: 'banana',
              label: '香蕉'
            },
            {
              value: 'orange',
              label: '橙子'
            }
          ]
        },
        {
          value: 'vegetable',
          label: '蔬菜',
          children: [
            {
              value: 'cabbage',
              label: '白菜'
            },
            {
              value: 'carrot',
              label: '胡萝卜'
            },
            {
              value: 'tomato',
              label: '番茄'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.category-select .el-cascader__label {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 6px 12px; 
  color: #333;
  font-size: 14px;
  margin-right: 6px;
}
.category-select .el-cascader__suffix {
  font-size: 12px;
  color: #999;
}
</style>

在上面的代码中，我们使用 `el-cascader` 组件来实现商品分类选择功能，通过 `options` 属性设置分类选项，通过 `v-model` 属性绑定选中的分类。

然后，我们通过自定义样式来美化组件的外观，例如给选中的分类添加背景色、圆角和边距，给后缀文字设置颜色和字体大小等等。你可以根据自己的需求进行样式调整。