el-cascade入门学习

已于 2022-05-16 17:38:56 修改
阅读量3.3k 收藏 2
点赞数
分类专栏： element-ui 文章标签： elementui
于 2022-05-16 17:38:21 首次发布
原文链接：https://element.eleme.cn/#/zh-CN/component/cascader
版权

  • 学习内容
    1.el-cascade的使用, 其中v-model对应的是数组，options中的key值固定，如label,value,children,disabled
    2.@change方法的方法参数对应选择的级联的value数组
    3.:props="{expandTrigger:'hover'}"触碰选项可展示出子选项，无需点击
    4.clearable实现清空数据
    5.:show-all-levels='false'实现只显示叶子节点值
    6.:props="{multiple:true}"实现可以多选多个叶子节点
    7.collapse-tags选中多个时实现折叠功能
    8.filterable实现搜索功能
    9.slot-scope="{node,data}" 和 node.isLeaf实现自定义级联菜单
    10.el-cascade-panel展示级联面板

  • 代码效果图
    在这里插入图片描述

  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <!-- el-cascade的v-model返回的是数组，options的key值固定 -->
        <el-cascader v-model='value' :options='options' @change='handleChange'></el-cascader>
        <!-- :props="expandTrigger:'hover'"当鼠标点入option，就会弹出下一级的选项，无需手动点击 -->
        <el-cascader v-model='value' :options='options' @change='handleChange' :props="{expandTrigger:'hover'}"></el-cascader>
        <!-- clearable可清空 -->
        <el-cascader v-model='value' :options='options' @change='handleChange' :props="{expandTrigger:'hover'}" clearable></el-cascader>
        <!-- 仅显示最后一级 -->
        <el-cascader v-model='value' :options='options' @change='handleChange' :props="{expandTrigger:'hover'}" clearable :show-all-levels='false'></el-cascader>
        <!-- 多选 -->
        <el-cascader v-model='mulValue' :options='options' @change='handleChange' :props='{expandTrigger:"hover",multiple:true}' clearable :show-all-levels='true'></el-cascader>
        <!-- 多选+折叠 -->
        <el-cascader v-model='mulValue' :options='options' @change='handleChange' :props='{expandTrigger:"hover",multiple:true}' clearable :show-all-levels='true' collapse-tags></el-cascader>
        <!-- 可搜索 -->
        <el-cascader v-model='mulValue' :options='options' @change='handleChange' :props="{expandTrigger:'hover',multiple:true}" clearable :show-all-levels='true' :collapse-tags='false' filterable></el-cascader>
        <!-- 自定义节点内容 -->
        <el-cascader v-model='mulValue' :options='options' @change='handleChange' :props='{expandTrigger:"hover",multiple:true}' clearable :show-all-levels='true' :collapse-tags='false' filterable>
            <template slot-scope="{node,data}">
                <span>{{data.label}}</span>
                <!-- node.isLeaf意思是是叶子节点 -->
                <span v-if='!node.isLeaf'>({{data.children.length}})</span>
            </template>
        </el-cascader>
        <!-- 级联面板 -->
        <el-cascader-panel :options='options'></el-cascader-panel>
    </div>
</body>
</html>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            value:[],
            mulValue:[],
            options:[
                {label:'指南',value:'zhinan',children:[
                    {label:'设计原则',value:'shejiyuanze',children:[
                        {label:'一致',value:'yizhi'},
                        {label:'反馈',value:'fankui'},
                        {label:'效率',value:'xiaolv'},
                        {label:'可控',value:'kekong'},
                    ]},
                    {label:'导航',value:'daohang',children:[
                        {label:'侧向导航',value:'cexiangdaohang'},
                        {label:'顶部导航',value:'dingbudaohang'}
                    ]}
                ]},
                {label:'组件',value:'zujian',disabled:true,children:[]}
                
            ]
        },
        methods:{
            handleChange(value){
                console.log(value)
                console.log(this.value)
            }
        }
    })
</script>

<style>

</style>
自律最差的编程狗
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element el-cascader动态加载数据 （多级联动，落地方案）
imtokenmax众筹
04-17 1132
如果是三级，那么leaf值是=> 0, 1, 2，以此类推。我的是四级，所以是 => node.level >= 3。获取到数据后，需要按照它的规范赋值 => value：值，label：文字，leaf：层级。value: [], // 多级联动的值 => 会是一个数组。// node 节点数据 node.value => 当前节点的值。配置自己的接口请求，我的是地区数据（省市区四级联动）// level: 层级 => 1,2,3,4。// obj里的键值是官方要求的。// 为1代表第一次请求。
react-native-cascade
04-30
react-native-cascade是Babel插件，它将自动将导入的样式表中的css声明与匹配JSX中其选择器的节点配对。 让我们发布一个新版本！ v17 目标 减少因手动将React Native样式表与JSX节点配对而造成的样板工作和不必要的...
Element el-cascader 级联选择器详解
热门推荐
程序员大阳
09-01 3万+
本文目录1. 概述2. 数据绑定2.1 默认数据绑定 1. 概述 级联选择器用途比较广泛，例如选择人员所属的单位，可以从总公司-分公司-部门-子部门这样级联选择下来。 如果自己去实现一个级联选择器，实际上是难度较大的，Element提供了一个功能相当完善的级联选择器，本篇文章就进行一个详细的介绍。 2. 数据绑定 2.1 默认数据绑定 级联选择器默认会绑定一个数组，节点的显示文本和值分别对应label、value属性，节点的后代对应children属性。示例代码如下： 默认数据绑定,选中值{{value}
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
风间琉璃c
03-24 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
Vue使用el-cascader 实现多级下拉菜单
m0_69210482的博客
08-30 918
【代码】Vue使用el-cascader 实现多级下拉菜单。
element 中 el-cascader多选 默认显示设置
weixin_53836578的博客
07-12 6122
element 中 el-cascader多选 默认显示设置
vue 树和级联选择器 el-cascader @change 获取全部值
tanzongbiao的专栏
06-08 2155
【代码】vue 树和级联选择器 el-cascader @change 获取全部值。
el-cascader 使用
Xintaiwuyanzu的博客
03-19 1805
注意：此处不在form表单中使用 <template> <div class="block"> <!-- <el-cascader ref="cascader" :props="{ expandTrigger: 'hover',multiple: true,checkStrictly:true }" placeholder="试试搜索：XX" :options=.
uxcore-cascade-select
05-04
uxcore-cascade-select React cascade select Development git clone https://github.com/uxcore/uxcore-cascade-select cd uxcore-cascade-select npm install npm run server if you'd like to save your install ...
djangocms-cascade-vagrant:Djangocms-Cascade 快速简单
07-08
$ cd djangocms-cascade-vagrant 流浪 $ vagrant up 此脚本将运行几分钟。 最后，系统会提示您输入admin用户的密码。 SSH 进入 Vagrant 机器 $ vagrant ssh 启动运行服务器 $ source /home/vagrant/cascadedemo...
Python-CascadeRCNN深入研究高质量物体检测
08-11
Cascade R-CNN: 深入研究高质量物体检测
Ajax-Cascade-Ajax-Select.zip
09-17
Ajax-Cascade-Ajax-Select.zip,这是一个现成的html/jquery源代码，演示了如何构建基于ajax的级联选择。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建...
el-cascader 加上filterable 和clearable 后出现2个清除icon解决方案
Sindy的博客
07-21 645
el-cascader v-model="citys" @change="handleChange" :options="cityList" collapse-tags clearable filterable placeholder="登录城市" class="login-city" ></el-cascader>
element el-cascader el-select @change expand-change自定义参数传递和接收
涂涂
05-05 3271
方法一： 参数传递 <el-cascader v-model="value" :options="List" @expand-change="handleChange($event,'222')" /> <el-cascader v-model="value" :options="List" @change="handleChange($event,'222')" /> 参数接收 handleChange(value, path) => {
elementui el-cascader 清除级联选择框选中状态
qq_44981128的博客
11-18 1351
<el-cascader ref="cascader" v-model="optionsValue" :options="options" :props="Options" @change="handleChange" clearable> </el-cascader> 重置methods reset (...
修复el-cascader插件 选中值和初始值相同时不能触发change事件
m0_37817986的博客
11-06 6599
当el-cascader使用 :value 赋予了初始值，切换选择其他值 可以正常触发@change绑定的事件方法，但当再次选择初始值时，并没有触发change事件方法。 修改cascader的checkedValue方法可以解决这个问题 定位源码位置方法 不同源码版本可能位置不同，上图作为参考，定位方法可以使用下面两种 方法一.使用浏览器debugger定位。在自定义的change事件处理方法中，打入debugger标签。当触发后，使用下图中 调试键点击大约5次后会进入cascader的checkedV
el-cascader 异步加载子节点数据+模糊搜索
bigbigpigsobig的博客
05-16 4680
需求点 el-cascader一共两级，第一级数据由接口返回；点击第一级的展开icon，拿第一级的id去请求接口获取第二级的数据； el-cascader需带有模糊搜索功能。 <el-form-item label="业务状态" prop="businessStatus"> <el-cascader ref="casader" clearable key="casader" :options="productList"
el-cascader自定义搜索功能before-filter
weixin_43773218的博客
09-16 6523
即不能用自带的搜索功能，决定自定义搜索功能，在el-cascader的输入框中根据输入的字符，通过后端接口去查做了区分的数据。需求：因为数据有重复名字的数据，但code是不相同的，就是虽然是相同名字，但其实是不同数据,又不能在原数据上直接做出区分。尝试了几次也不知道哪里出了问题，反正都不行。官方文档中，有关于自定义搜索功能的描述。当时在做这个的时候，网上搜出来的都是用。但回显的时候，还是回显到原数据上。将异步的接口请求改为同步方法，以及。
element-ui 级联选择器el-cascader踩坑
秋实的博客
06-10 2431
el-cascader 级联选择器 下拉选项选中不刷新；数据回显慢；
el-cascade懒加载回显
最新发布
02-01
el-cascade是Element UI框架中的一个组件，用于实现级联选择器。懒加载回显是指在级联选择器中，当某个级联选项被选择时，根据选择的值动态加载下一级的选项，并将已选择的值回显到级联选择器中。 在el-cascade中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值