el-cascader组件通用属性配置(主要通过popper-class属性设置和区分多个级联组件):
props属性的常用取值:
- expandTrigger: 'hover', // 鼠标悬浮展开子级框
- emitPath: false // v-model的绑定值,直接是最后一级的value值,不包含父级。
- children: 'stock_data', // 设置子级的数组名为stock_data字段(默认组件读children字段),注意:如果children为空数组,组件也会渲染(点击展开为空白框),因此若children为空数组,需让后台直接不要返回该属性字段或返回值改为undefind!
- checkStrictly: false // 该属性默认为true, 即多级数据,用户只能勾选最后一级,设置为false, 用户可以选择任意一级。
点击label就可以选中原理:设置el-radio(单选)或el-checkbox(多选)的宽度width为100%,然后设置对应label文本的宽度为 - 90%即可。
<!--template中的级联组件-->
<el-cascader
v-model="listQuery.store_id"
:options="warehouseList"
ref="cascaderStore"
popper-class="custom_cascader"
:props="{
label: 'storeroom_name',
value: 'storeroom_id',
children: 'store_list',
checkStrictly: true,
expandTrigger: 'hover',
emitPath: false
}"
filterable
clearable
placeholder="请选择仓库库房"
>
</el-cascader>
无论几级,点击label就可以选中:
// 点击label就可以选中,其中:custom_cascader为自定义级联组件类名。
// 单选
.custom_cascader .el-cascader-panel .el-cascader-menu .el-radio {
width: 100% !important;
}
// 多选
.custom_cascader .el-cascader-panel .el-cascader-menu .el-checkbox {
width: 100% !important;
}
// 设置单/多选的label宽度
.custom_cascader .el-cascader-panel .el-cascader-menu .el-cascader-node__label{
margin-left: -90% !important;
}
case1:共2级,只能选择第2级数据,且点击label就可以选中。 (注意:限制只能选择第2级, 也可以直接设置checkStrictly属性为true即可(默认不写,该属性就是为true))
/* 设置下拉框中,隐藏第1级的勾选,设置第2级点击label就可以选中 */
/* 注:当一个页面有多个级联组件,为了区分,可设置 popper-class="custom_cascader" 属性来区分!
下面设置的css前再加上自定义类名即可。nth-of-type(2)为第2级下拉菜单父容器
*/
.el-cascader__dropdown .el-cascader-menu:nth-of-type(1) .el-cascader-node label {
display: none;
}
.el-cascader-panel .el-cascader-menu:nth-of-type(2) .el-checkbox{
width: 100%;
}
.el-cascader-panel .el-cascader-menu:nth-of-type(2) .el-cascader-node__label{
margin-left: -90%;
}
case 2:共3级,限制第一级不可选, 其他级都可选。
注:该css设置,在某个.vue组件scoped中设置可能不生效,需到全局的css文件设置(如index.css)
// 商品分类3级,需限制第1级不可选(goods-category-cascader-stocking-page为popper-class类名)
.goods-category-cascader-stocking-page .el-cascader-menu:nth-of-type(1) .el-radio__input {
display: none !important;
}
其他扩展技巧:
1. 如何过滤children为空数组的数据?(即当children为空数组,页面不要渲染空白展开框)
// 格式化数据,递归将空的children置为undefined
formatCascaderData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
// children若为空数组,则将children设为undefined
data[i].children = undefined;
} else {
// children若不为空数组,则继续 递归调用 本方法
this.formatCascaderData(data[i].children)
}
}
return data
}