vue商品分类选择一排放置代码超级美观element-plus,加好看的样式
时间: 2023-06-20 22:06:48 浏览: 59
可以使用 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` 属性绑定选中的分类。
然后,我们通过自定义样式来美化组件的外观,例如给选中的分类添加背景色、圆角和边距,给后缀文字设置颜色和字体大小等等。你可以根据自己的需求进行样式调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)