在使用Cascader级联选择器的时候,遇到了一些小问题
第一个问题:从后台读取完数据后,使用级联选择器,但是那个级联的弹框非常大,和官方文档中的形状完全不一样,搞得我十分难受,于是就想着,改一下css样式不就完了嘛,打开控制台
找到了最顶上的那个类,搞一下他,最开始我是在vue组件中的style中修改
.el-cascader-panel {
width: 360px;
height: 300px;
}
然后再次运行代码,发现没有效果,才发现,在这个组件里面根本就没有用到这个类,这个类是在渲染出来的代码中使用的,再仔细一思考,我可以在总的css文件中添加这个代码呀,于是乎就在这个总css文件中添加这个代码,再次运行,结果完美
但是这个只能使用两级,如果有第三级的时候就出问题了,所以,再次修改css代码,el-cascader-menu__list是管每一级的宽度和高度
.el-cascader-menu__list {
width: 180px;
height: 300px;
}
结果如下,就算有在多的级数也不会有问题
第二个问题:大小的问题解决了,但是这个只能选择第二级的内容,第一级选择不了,于是又找官方文档,在版本2.12.0中发现在props中添加属性 checkStrictly 为true就可以,代码如下:
<!-- options用来指定数据源,props 用来指定配置对象 -->
<el-cascader
v-model="selectedKeys"
:options="parentCateList"
expand-trigger="hover"
:props="cascaderProps"
@change="parentCateChanged" clearable></el-cascader>
所绑定的相关数据
cascaderProps: {
value: 'cat_id',
label: 'cat_name',
children: 'children',
checkStrictly: true
// multiple: true
}
貌似在之前的版本中是直接在 el-cascader 标签中添加 change-on-select 这个属性就可以实现选择一级的内容
但是这个时候才发现 只能点击圆圈才能选中,点击文字 label 没有效果,心里一度火大,难受
这时候只有百度了,然后发现有大佬同样遇到了这个问题,链接在这里https://blog.csdn.net/qq_36410795/article/details/100894520
跟着上面的思路看一遍就可以了
抄了一段代码(假装是自己写的)
mounted() {
setInterval(function() {
document.querySelectorAll('.el-cascader-node__label').forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click()
}
})
}, 1000)
}
最后问题解决