Element-UI中Cascader 级联选择器使用

Element-UI的级联组件官方文档

  <el-cascaderv-model="value":options="options":props="{ expandTrigger: 'hover' }"@change="handleChange"></el-cascader>

说明：
options:绑定数据源
props:数据配置项
v-model=“value”:双向绑定级联选择框中选中的value值
@change=“handleChange” :当级联选择框变化，触发handleChange事件，可返回选中项的值
使用：

<!--级联选择框-->
<el-cascaderv-model="selectedKeys":options="parentList":props="cascaderProps"@change="parentCateChange" clearable></el-cascader>

export default(){data(){return {//选中项的cat_id数组selectedKeys:[],//数据源信息parentList:{},//数据的配置信息cascaderProps:{//可以选中一级内容checkStrictly:true,//指定触发方式expandTrigger: 'hover',//数据源parantList中的cat_id做数据绑定value:'cat_id',//数据源parantList的cat_name渲染出来的内容label:'cat_name',//数据源parantList的children做嵌套children:'children'}    }},methods:{handleChange(){console.log(this.selectedKeys)}}
}

注：·el-cascader中的clearable属性表示点击叉可清空选中框内容

如果出现一级分类菜单沾满全屏的现象：
在全局样式的global.css中添加一下面样式即可(在页面中都会生效)

 .el-scrollbar__wrap {height: 300px !important
}

Element-UI中Cascader 级联选择器使用相关推荐

修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
element UI中的select选择器的change方法需要传递多个值
如上图是element UI的一个基本的select选择器根据element UI的官网事件调用,有一下几种: 如果直接调用上述事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参 ...
element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
Element ui 中 el-cascader 级联动态加载数据方法
话不多说,上代码 html部分: <el-cascader :props="treeOption" @change="onChange" style=&q ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式下面是我开发中遇到 ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

Element-UI中Cascader 级联选择器使用

Element-UI中Cascader 级联选择器使用相关推荐

最新文章

热门文章