1. <html>
  2. <head>test</head>
  3. <style>
  4.     @import url("http://unpkg.com/element-ui@2.4.1/lib/theme-chalk/index.css");
  5. </style>
  6. <body>
  7.  
  8.     <script src="http://unpkg.com/vue/dist/vue.js"></script>
  9. <script src="http://unpkg.com/element-ui@2.4.1/lib/index.js"></script>
  10. <div id="app">
  11. <el-cascader :options="options" change-on-select></el-cascader>
  12. </div>
  13. <script>
  14.     var Main = {
  15.     data() {
  16.       return {
  17.         options: [{
  18.           value: 'zhinan',
  19.           label: '指南',
  20.           children: [{
  21.             value: 'shejiyuanze',
  22.             label: '设计原则',
  23.             children: [{
  24.               value: 'yizhi',
  25.               label: '一致'
  26.             }, {
  27.               value: 'fankui',
  28.               label: '反馈'
  29.             }, {
  30.               value: 'xiaolv',
  31.               label: '效率'
  32.             }, {
  33.               value: 'kekong',
  34.               label: '可控'
  35.             }]
  36.           }, {
  37.             value: 'daohang',
  38.             label: '导航',
  39.             children: [{
  40.               value: 'cexiangdaohang',
  41.               label: '侧向导航'
  42.             }, {
  43.               value: 'dingbudaohang',
  44.               label: '顶部导航'
  45.             }]
  46.           }]
  47.         }, {
  48.           value: 'zujian',
  49.           label: '组件',
  50.           children: [{
  51.             value: 'basic',
  52.             label: 'Basic',
  53.             children: [{
  54.               value: 'layout',
  55.               label: 'Layout 布局'
  56.             }, {
  57.               value: 'color',
  58.               label: 'Color 色彩'
  59.             }, {
  60.               value: 'typography',
  61.               label: 'Typography 字体'
  62.             }, {
  63.               value: 'icon',
  64.               label: 'Icon 图标'
  65.             }, {
  66.               value: 'button',
  67.               label: 'Button 按钮'
  68.             }]
  69.           }, {
  70.             value: 'form',
  71.             label: 'Form',
  72.             children: [{
  73.               value: 'radio',
  74.               label: 'Radio 单选框'
  75.             }, {
  76.               value: 'checkbox',
  77.               label: 'Checkbox 多选框'
  78.             }, {
  79.               value: 'input',
  80.               label: 'Input 输入框'
  81.             }, {
  82.               value: 'input-number',
  83.               label: 'InputNumber 计数器'
  84.             }, {
  85.               value: 'select',
  86.               label: 'Select 选择器'
  87.             }, {
  88.               value: 'cascader',
  89.               label: 'Cascader 级联选择器'
  90.             }, {
  91.               value: 'switch',
  92.               label: 'Switch 开关'
  93.             }, {
  94.               value: 'slider',
  95.               label: 'Slider 滑块'
  96.             }, {
  97.               value: 'time-picker',
  98.               label: 'TimePicker 时间选择器'
  99.             }, {
  100.               value: 'date-picker',
  101.               label: 'DatePicker 日期选择器'
  102.             }, {
  103.               value: 'datetime-picker',
  104.               label: 'DateTimePicker 日期时间选择器'
  105.             }, {
  106.               value: 'upload',
  107.               label: 'Upload 上传'
  108.             }, {
  109.               value: 'rate',
  110.               label: 'Rate 评分'
  111.             }, {
  112.               value: 'form',
  113.               label: 'Form 表单'
  114.             }]
  115.           }, {
  116.             value: 'data',
  117.             label: 'Data',
  118.             children: [{
  119.               value: 'table',
  120.               label: 'Table 表格'
  121.             }, {
  122.               value: 'tag',
  123.               label: 'Tag 标签'
  124.             }, {
  125.               value: 'progress',
  126.               label: 'Progress 进度条'
  127.             }, {
  128.               value: 'tree',
  129.               label: 'Tree 树形控件'
  130.             }, {
  131.               value: 'pagination',
  132.               label: 'Pagination 分页'
  133.             }, {
  134.               value: 'badge',
  135.               label: 'Badge 标记'
  136.             }]
  137.           }, {
  138.             value: 'notice',
  139.             label: 'Notice',
  140.             children: [{
  141.               value: 'alert',
  142.               label: 'Alert 警告'
  143.             }, {
  144.               value: 'loading',
  145.               label: 'Loading 加载'
  146.             }, {
  147.               value: 'message',
  148.               label: 'Message 消息提示'
  149.             }, {
  150.               value: 'message-box',
  151.               label: 'MessageBox 弹框'
  152.             }, {
  153.               value: 'notification',
  154.               label: 'Notification 通知'
  155.             }]
  156.           }, {
  157.             value: 'navigation',
  158.             label: 'Navigation',
  159.             children: [{
  160.               value: 'menu',
  161.               label: 'NavMenu 导航菜单'
  162.             }, {
  163.               value: 'tabs',
  164.               label: 'Tabs 标签页'
  165.             }, {
  166.               value: 'breadcrumb',
  167.               label: 'Breadcrumb 面包屑'
  168.             }, {
  169.               value: 'dropdown',
  170.               label: 'Dropdown 下拉菜单'
  171.             }, {
  172.               value: 'steps',
  173.               label: 'Steps 步骤条'
  174.             }]
  175.           }, {
  176.             value: 'others',
  177.             label: 'Others',
  178.             children: [{
  179.               value: 'dialog',
  180.               label: 'Dialog 对话框'
  181.             }, {
  182.               value: 'tooltip',
  183.               label: 'Tooltip 文字提示'
  184.             }, {
  185.               value: 'popover',
  186.               label: 'Popover 弹出框'
  187.             }, {
  188.               value: 'card',
  189.               label: 'Card 卡片'
  190.             }, {
  191.               value: 'carousel',
  192.               label: 'Carousel 走马灯'
  193.             }, {
  194.               value: 'collapse',
  195.               label: 'Collapse 折叠面板'
  196.             }]
  197.           }]
  198.         }, {
  199.           value: 'ziyuan',
  200.           label: '资源',
  201.           children: [{
  202.             value: 'axure',
  203.             label: 'Axure Components'
  204.           }, {
  205.             value: 'sketch',
  206.             label: 'Sketch Templates'
  207.           }, {
  208.             value: 'jiaohu',
  209.             label: '组件交互文档'
  210.           }]
  211.         }]
  212.       };
  213.     }
  214.   };
  215. var Ctor = Vue.extend(Main)
  216. new Ctor().$mount('#app')
  217. </script>
  218. </body>
  219.  
  220. </html>

　　

element-ui Cascader 级联选择器示例的更多相关文章

  1. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题（转载）

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  2. 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中

    Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...

  3. element 的 Cascader 级联选择器设定默认值

    Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...

  4. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  5. Element UI：级联选择器Cascader_动态加载_多级请求不同接口（已知第一级调取第二级）

    ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...

  6. element Ui的级联选择器 任意一级选中下拉框自动关闭

    封装成一个子组件 <template> <el-cascader v-model="value" clearable placeholder="请选择& ...

  7. vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. ElementUI组件Cascader级联选择器数据后台处理

    Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...

  9. ElementUI 之 Cascader 级联选择器指定 value label

    ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...

随机推荐

  1. PAT_A1109#Group Photo

    Source: PAT A1109 Group Photo (25 分) Description: Formation is very important when taking a group ph ...

  2. Lua的string库函数、lua中string的模式匹配

    --****************Lua的string库函数****************** --1.string.byte --string.byte (s [, i [, j]]) --取出 ...

  3. Solr学习记录:Getting started

    目录 Solr学习记录:Getting started 1.Solr Tutorial 2. A Quick Overview Solr学习记录:Getting started 本教程使用环境:jav ...

  4. 用 Vue 做一个简单的购物app

    前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...

  5. 2018 noip 备战日志

    我是写给自己看的…… Day1 10.8 今天开始停晚修课了,开始认真备战考试了. 今天晚上效率不错,竟然不会累,应该是平时一直这个时间写作业大脑高度集中, 现在换了编程也一样可以集中到这个状态 一些 ...

  6. 【[Offer收割]编程练习赛11 B】物品价值

    [题目链接]:http://hihocoder.com/problemset/problem/1486 [题意] [题解] 设f[i][j]表示前i个物品,每种属性的状态奇偶状态为j的最大价值; 这里 ...

  7. （27）Spring Boot Junit单元测试【从零开始学Spring Boot】

    Junit这种老技术,现在又拿出来说,不为别的,某种程度上来说,更是为了要说明它在项目中的重要性. 那么先简单说一下为什么要写测试用例 1. 可以避免测试点的遗漏,为了更好的进行测试,可以提高测试效率 ...

  8. D - Mayor's posters

    D - Mayor's posters POJ - 2528 思路:线段树+离散化. 离散化时注意特殊情况,如果两个数相差大于一,离散时也应该差1.比如 1 3 离散后应该为 1 2. 错因: 1.二 ...

  9. 笔记本联想（Lenovo）G40-70M加装内存和SSD固态硬盘

    笔记本联想(Lenovo)G40-70M加装内存和SSD固态硬盘 系列文章: 笔记本电脑提速之加装内存条.SSD固态硬盘.光驱位换SSD固态硬盘 笔记本ThinkPad E430c加装内存和SSD固态 ...

  10. oracle删除日志文件

    oracle删除日志文件 删除日志文件的语法例如以下: alter database drop logfile member logfile_name; 删除日志文件须要注意例如以下几点: 1.该日志 ...