解决 element-ui下Cascader 数据太多显示不完全的问题
vue电商项目中,商品分类功能代码:<!-- options数据源props配置选项checkStrictly级联选中任意一级--><el-cascader :options="parentCateList":props="cascaderProps" v-model="selectedKeys"@change="parentCateChange" cleara
·
vue电商项目中,商品分类功能
代码:
<!-- options数据源 props配置选项 checkStrictly级联选中任意一级-->
<el-cascader :options="parentCateList"
:props="cascaderProps" v-model="selectedKeys"
@change="parentCateChange" clearable >
</el-cascader>```
// 父级分类列表
parentCateList:[],
// 指定级联选择器的配置对象
cascaderProps:{
expandTrigger: 'hover',
// 指定选项的值
value:'cat_id',
// 指定选项标签
label:'cat_name',
// 指定选项的子选项
children:'children',
checkStrictly:true
}
// 父级分类列表
async getParentCateList(){
const {data:res} =await this.$http.get('categories',{params:{type:2}})
// console.log(res)
if(res.meta.status!==200) return window.$message.error('父级分类列表失败')
console.log(res.data)
this.parentCateList=res.data
},
在后台打印结果:
在服务器执行结果:
问题解决:
1.发现是css样式问题,cascader样式
2
..el-cascader-panel {
height: 300px;
}
更多推荐
已为社区贡献3条内容
所有评论(0)