vue-element Cascader--demo使用

最新推荐文章于 2023-03-23 18:33:27 发布
最新推荐文章于 2023-03-23 18:33:27 发布
阅读量223 收藏
点赞数
分类专栏： VUE框架 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45176415/article/details/122002040
版权
  1. 根据字符自适应显示边框
  2. 单点关闭
  3. 检索文字及字符长度
  4. 获取每个对象信息
  5. 三个以来文件
     <link rel="stylesheet" href="common/plugins/element-ui/lib/theme-chalk/index.css">
    <script src="common/plugins/vue/vue.min.js"></script>
    <script src="common/plugins/element-ui/lib/index.js" type="text/javascript"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./index.css">
</head>
<style>
    #templateAreaLeft{
        margin: 50px auto;
        width: 1000px;
    }
</style>
<body>
    <el-row id="templateAreaLeft"  type="flex" justify="center" align="middle" >
        <el-col :span="3">显示级联:</el-col>
        <el-col :span="12" class="form-group ">
            <el-cascader :options="sortFields" :props="cascaderOptions" :append-to-body="false" :style="cascaderWidth"
                v-model="cascaderFirstId" ref="cascaderRef" debounce="0" id="el-cascader" @change="selectArea" transfer>
            </el-cascader>
        </el-col>
    </el-row>

    <script src="./vue.min.js"></script>
    <script src="./index.js"></script>
    <script>
        var cascaderOptions = {
            checkStrictly: true,
            filterable: true,
            leaf: "templateId",
            label: "label",
            value: "value",
            multiple: false
        }
        var sortFields =

            vue = new Vue({
                el: "#templateAreaLeft",
                data() {
                    return {
                        cascaderOptions: cascaderOptions, //级联数据
                        sortFields: [{
                            value: 'zhinan',
                            label: '指南',
                            children: [{
                                value: 'shejiyuanze',
                                label: '设计原则',
                                children: [{
                                    value: 'yizhi',
                                    label: '一致'
                                }, {
                                    value: 'fankui',
                                    label: '反馈'
                                }, {
                                    value: 'xiaolv',
                                    label: '效率'
                                }, {
                                    value: 'kekong',
                                    label: '可控'
                                }]
                            }, {
                                value: 'daohang',
                                label: '导航',
                                children: [{
                                    value: 'cexiangdaohang',
                                    label: '侧向导航'
                                }, {
                                    value: 'dingbudaohang',
                                    label: '顶部导航'
                                }]
                            }]
                        }, {
                            value: 'zujian',
                            label: '组件',
                            children: [{
                                value: 'basic',
                                label: 'Basic',
                                children: [{
                                    value: 'layout',
                                    label: 'Layout 布局'
                                }, {
                                    value: 'color',
                                    label: 'Color 色彩'
                                }, {
                                    value: 'typography',
                                    label: 'Typography 字体'
                                }, {
                                    value: 'icon',
                                    label: 'Icon 图标'
                                }, {
                                    value: 'button',
                                    label: 'Button 按钮'
                                }]
                            }, {
                                value: 'form',
                                label: 'Form',
                                children: [{
                                    value: 'radio',
                                    label: 'Radio 单选框'
                                }, {
                                    value: 'checkbox',
                                    label: 'Checkbox 多选框'
                                }, {
                                    value: 'input',
                                    label: 'Input 输入框'
                                }, {
                                    value: 'input-number',
                                    label: 'InputNumber 计数器'
                                }, {
                                    value: 'select',
                                    label: 'Select 选择器'
                                }, {
                                    value: 'cascader',
                                    label: 'Cascader 级联选择器'
                                }, {
                                    value: 'switch',
                                    label: 'Switch 开关'
                                }, {
                                    value: 'slider',
                                    label: 'Slider 滑块'
                                }, {
                                    value: 'time-picker',
                                    label: 'TimePicker 时间选择器'
                                }, {
                                    value: 'date-picker',
                                    label: 'DatePicker 日期选择器'
                                }, {
                                    value: 'datetime-picker',
                                    label: 'DateTimePicker 日期时间选择器'
                                }, {
                                    value: 'upload',
                                    label: 'Upload 上传'
                                }, {
                                    value: 'rate',
                                    label: 'Rate 评分'
                                }, {
                                    value: 'form',
                                    label: 'Form 表单'
                                }]
                            }, {
                                value: 'data',
                                label: 'Data',
                                children: [{
                                    value: 'table',
                                    label: 'Table 表格'
                                }, {
                                    value: 'tag',
                                    label: 'Tag 标签'
                                }, {
                                    value: 'progress',
                                    label: 'Progress 进度条'
                                }, {
                                    value: 'tree',
                                    label: 'Tree 树形控件'
                                }, {
                                    value: 'pagination',
                                    label: 'Pagination 分页'
                                }, {
                                    value: 'badge',
                                    label: 'Badge 标记'
                                }]
                            }, {
                                value: 'notice',
                                label: 'Notice',
                                children: [{
                                    value: 'alert',
                                    label: 'Alert 警告'
                                }, {
                                    value: 'loading',
                                    label: 'Loading 加载'
                                }, {
                                    value: 'message',
                                    label: 'Message 消息提示'
                                }, {
                                    value: 'message-box',
                                    label: 'MessageBox 弹框'
                                }, {
                                    value: 'notification',
                                    label: 'Notification 通知'
                                }]
                            }, {
                                value: 'navigation',
                                label: 'Navigation',
                                children: [{
                                    value: 'menu',
                                    label: 'NavMenu 导航菜单'
                                }, {
                                    value: 'tabs',
                                    label: 'Tabs 标签页'
                                }, {
                                    value: 'breadcrumb',
                                    label: 'Breadcrumb 面包屑'
                                }, {
                                    value: 'dropdown',
                                    label: 'Dropdown 下拉菜单'
                                }, {
                                    value: 'steps',
                                    label: 'Steps 步骤条'
                                }]
                            }, {
                                value: 'others',
                                label: 'Others',
                                children: [{
                                    value: 'dialog',
                                    label: 'Dialog 对话框'
                                }, {
                                    value: 'tooltip',
                                    label: 'Tooltip 文字提示'
                                }, {
                                    value: 'popover',
                                    label: 'Popover 弹出框'
                                }, {
                                    value: 'card',
                                    label: 'Card 卡片'
                                }, {
                                    value: 'carousel',
                                    label: 'Carousel 走马灯'
                                }, {
                                    value: 'collapse',
                                    label: 'Collapse 折叠面板'
                                }]
                            }]
                        }, {
                            value: 'ziyuan',
                            label: '资源',
                            children: [{
                                value: 'axure',
                                label: 'Axure Components'
                            }, {
                                value: 'sketch',
                                label: 'Sketch Templates'
                            }, {
                                value: 'jiaohu',
                                label: '组件交互文档'
                            }]
                        }],
                        cascaderFirstId: '',
                        itemData: {},
                        cascaderWidth: {},
                        valLength: 0
                    }
                },
                methods: {
                    selectArea() {
                        // 关闭
                        this.$refs.cascaderRef.dropDownVisible = false;
                        // 获取每个对象
                        this.itemData = this.$refs['cascaderRef'].getCheckedNodes()[0].data
                        var strs = this.$refs['cascaderRef'].getCheckedNodes()[0].pathLabels.join(',');
                        // 根据文字自动缩放表格
                        this.cascaderWidth['width'] = (strs.length+5) * 14 + 'px'
                        console.log("宽度",this.cascaderWidth)
                        console.log("传值",this.cascaderFirstId)

                    },
                    // 统计文字及字符
                    getCount(strs) {
                        var hanReg = strs.match(/[\u4e00-\u9fa5]/g)
                        var hanCount = hanReg && hanReg.join("").length
                        return strs.length + hanCount + 2
                    }
                },
                mounted: function () {}
            });
    </script>
</body>

</html>
别动我代码儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue Element Cascader使用
zw沐知的博客
07-06 614
前端使用不做说明，主要是后端思路，此方法只适合数据比较少的时候 主要用于实现java代码于Cascader的结合 层级列表构造代码 public class Cascader { @JsonSerialize(using = ToStringSerializer.class) private Long value; private String label; private List<Cascader> children; } /** *
vue+element_ui后台demo
08-26
vue+element_ui后台demo, 使用： 1、进入指定文件夹 2、npm run dev
vue-element-demo:元素演示
05-18
vue-element-demo A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 参考文档：
element vue demo
jack_rose_me的博客
08-04 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <...
vue+element-ui demo
09-29
这是一个vue+element-ui的demo 里面有菜单menu组件，是我做的一个后台管理的模板，用到了route路由转向，以及子父组件方法的调用传参等等，如果是想用vue搭建后台的，可以直接使用 使用方法： cd vue-admin-master-demo npm run dev
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-element-admin 集成框架设置中文语言
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue-element-admin 精简版
03-03
"Vue-element-admin 精简版"是一款基于Vue.js的前端框架，专为简化项目构建而设计。这个版本剔除了不必要和冗余的组件，只保留了基础框架结构，包括设置模块和头部导航栏，使得项目更加轻量级，适用于快速开发和小...
vue-element-Admin-demo:vue-element-Admin框架源代码
03-23
English ||| 由...赞助 活动服务销售平台 客户消息直达工作群 ... 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 该项目不支持低版本的浏览器（例如IE）。 请自行添加polyfill。 准备 您
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
Element Card 卡片的具体使用
12-28
组件— 卡片 基础用法 <el class=box-card> <div slot=header class=clearfix> <span>卡片名称</span> <el xss=removed type=text>操作按钮</el> </div> <div v-for=o key=o class=text> {{'列表内容 ' + o }} </div> </el> <style> .text { font-si
el-select 下拉框多选实现全选的实现
12-12
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 下拉选项全都勾选时，【全选】自动勾选； 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选； 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了； 上面就是我要实现的功能，我好啰嗦。。。还是看代码吧。。。 html部分： <el-select multiple collapse-tag
Vue Element Cascader 级联选择器
lmf13992427957的博客
09-28 2787
因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select。特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变。
vue Element 利用Cascader 级联选择器实现三层选择器
weixin_44283571的博客
10-22 2361
在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。 效果图 实现过程 实现这个功能需要用到Element这个框架中的Cascader 级联选择器，但是不是那个Cascader 级联选择器都适用于这种场景，其中我选择了Cascader 级联选择器中的动态加载选择器，链接 --> 添加链接描述 这个选择器的好处就像你看到的那样它可以：动态加载，这也就意味着可以把我们的数
Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭
fangqi20170515的博客
03-23 2239
在级联选择器@change方法中，监听变化，首先添加一个ref=“cascaderHandle”，在@change绑定的方法中监听：this.$refs.cascaderHandle.dropDownVisible = false;
ElementUI/Vue 联级选择器Cascader 在实际中的应用
liujiebahuang的博客
12-18 465
目录页面展示代码 页面展示 代码 html部分 <el-form ref="form" :model="form" label-width="140px"> <el-form-item label="指定分类(筛选)" prop="nrflCodeId"> <el-cascader :options="nrflOptions" ref="cascaderAdd...
使用 Vue 开发 scrollbar 滚动条组件
weixin_34268753的博客
04-05 610
Vue 应该说是很火的一款前端库了，和 React 一样的高热度，今天就来用它写一个轻量的滚动条组件； 知识储备：要开发滚动条组件，需要知道知识点是如何计算滚动条的大小和位置，还有一个问题是如何监听容器大小的改变，然后更新滚动条的位置； 先把样式贴出来： .disable-selection { -webkit-touch-callout: none; -webkit-use...
element el-cascader实现懒加载省市区多级联选
Liu_JiaqiPro的博客
07-26 1318
懒加载多级联选
element-ui之级联选择器(Cascader)的使用详细过程
热门推荐
itboy
01-21 10万+
使用element-ui级联选择器：     从后台获取数据的过程:参考-------&gt;java从数据库中读取数据-生成菜单树tree之算法优化     第一步：从后台获取json数据：获得数据类似于下列json [ { "id": 1, "createTime": null, "updateTime": null, "name": "特产 / 食...
安装使用vue-element-admin
最新发布
05-07
下面是安装使用vue-element-admin的步骤： 1. 安装Node.js和npm：在官网上下载安装包，安装完成后检查是否安装成功： ``` node -v npm -v ``` 2. 全局安装vue-cli： ``` npm install -g vue-cli ``` 3. 从...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别动我代码儿

感谢技术精进的你，加油不负韶华

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值