el-cascader
是 Element UI 中的级联选择器组件,它可以用于选择多级联动的数据
下面介绍 el-cascader
常用的属性及使用方法,并提及一些注意事项。
常用属性:
options
:数据源,用于指定级联选择器的选项数据。它是一个数组,每个元素代表一个选项,包含value
,label
,children
等属性。可以是静态的数组,也可以是动态的、通过接口获取的数据。value
:组件的绑定值,可以使用v-model
进行双向绑定。它是一个数组,表示当前选择的所有选项的值。props
:配置选项对象的属性。其中props.value
表示选项值的键名,props.label
表示选项标签的键名,props.children
表示子级选项的键名。placeholder
:占位符文本,在没有选中任何选项时显示。filterable
:是否可搜索选项,默认为false
。设置为true
后,可以在输入框中搜索选项。clearable
:是否可清空选项,默认为false
。设置为true
后,右侧会显示一个清空按钮,点击后可以清空已选的选项。disabled
:是否禁用组件,默认为false
。设置为true
后,组件将无法进行交互。expand-trigger
:展开子选项的触发方式,可选值为'click'
和'hover'
。默认为'click'
,表示点击展开子选项,设置为'hover'
则表示鼠标悬停在选项上时展开子选项。
注意事项:
el-cascader
组件的数据源说明需要符合特定的数据格式,即每个选项对象应该包含value
、label
、children
等属性。- 通过
props
属性可以自定义选项对象的键名,如果数据源的键名不同,需要进行映射。 -
:props="{ label: 'label', value: 'value', children: 'children', lazy: true, // checkStrictly: true, // expandTrigger: 'hover', // emitPath: false }"
- 如果数据嵌套层级很深,需要注意组件默认的展示宽度可能不够,可以使用 CSS 自定义组件的宽度。
多个接口调用:
需求:输入框拿到最后一级的选中的值,一级通过调用接口1获取,2级通过拿到接口1的id,再调用接口2获取数据,没有数据展示为暂无数据。
开始思路:
不用组件的lazy,自己尝试拿到数据后通过循环或者map进行操作的转为树状,二级列表的展示会有问题,数据更新但是视图并不会,一级能够正常显示,二级为点击获取的会有问题。
动态懒加载获取数据:
要调用两次接口,并不是拿到树状的结构,需要将两次的数据合在一起使用(也是父子关系),点击一级获取2级数据,为动态的。(效果如下图:)
//显示
<el-cascader style="width: 270px"
:options="options"
:props="props"
:show-all-levels="false"
clearable
filterable v-model="consumerNolist"
@change="handleChange"
></el-cascader>
属性show-all-levels定义了是否显示完整的路径,将其赋值为false则仅显示最后一级
data里面的代码:
(望自行优化,我就不优化了)
options: [],
props: {
lazy: true,
lazyLoad: (node, resolve) => {
console.log(node,'node');
const { level } = node;
const nodes = [];
// level: 层级
// node 节点数据
// 一级菜单数据
// 为1代表第一次请求
if(level==0){
getAllShpper()
.then((res) => {
// 节点数组
res.data.items.map((item) => {
let obj = {
value: item.shipperNo,
label: item.shipperName,
leaf: node.level >=2,
};
nodes.push(obj)
});
resolve(nodes);
})
.catch((error) => {
console.log(error);
});
}
if(level==1){
getConsumer({'shipperNo':node.value})
.then((res) => {
// 节点数组
res.data.items.map((item) => {
let obj = {
value: item.consumerNo,
label: item.consumerName,
leaf: node.level >=1,
};
nodes.push(obj)
});
// resolve 节点返回
resolve(nodes);
})
.catch((error) => {
console.log(error);
});
}
},
},
高度样式问题:
同时需要注意的是默认的高度为内容高度,在当前页面设置无效果,深度也一样,
当前页面:
.el-cascader-panel{
height: 300px ;
overflow: hidden;
} 局部无效
::v-deep .el-cascader-panel{
height: 300px ;
overflow: hidden;
} 局部深度无效
搞个全局(在src\assets\styles里面)就行。
src\assets\styles
.el-cascader-panel{
height: 300px ;
overflow: hidden;
} 全局有效