Vue-Element-ui Cascader 级联选择器

Vue-Element-ui Cascader 级联选择器

 

基本属性介绍：

<el-cascader
v-model="selectedKeys" // v-model 绑定的selectedKeys接收的是数组类型
:options="parentCataList" // options用来指定数据源
:props="cascaderProps" // 配置数据渲染的格式，详情见下
// cascaderProps 为对象 配置见下
@change="parentCateChange" // 当选中节点变化时触发

clearable // 可以直接清空表单中的内容
>
</el-cascader>

JS部分
// 指定级联选择器的配置对象
cascaderProps:{
expandTrigger:"hover", // 次级菜单的展开方式 click / hover
value:'cat_id', // 指定选项的值为选项对象的某个属性值，
// value配置的内容会存到上方selectedKeys数组，此处存的是对应数据id
label:'cat_name', // 指定选项标签为选项对象的某个属性值，即现实到级联选择器中的内容
children:'children', // 指定选项的子选项为选项对象的某个属性值
checkStrictly:true // 是否允许多选
},

parentCataList:[], // 上方options绑定的数据源，一般由后端接口获得并存入

selectedKeys:[], // 收集的是对应props对应配置的value
————————————————
版权声明：本文为CSDN博主「小白-先森」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Allurewuhui/article/details/121683022