代码:
getcascaderobj = function(val, opt){ return val.map(function (value, index, array) { for (var itm of opt) { if (itm.value == value) { opt = itm.children; return itm; } } return null; }); }
完整示例:
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> <style> </style></head><body> <div id="app"> <el-cascader v-model="val" placeholder="试试搜索：指南" :options="options" filterable @change="handleitemchange"></el-cascader> <div v-for="i in vals"> label:{{i.label}} - value{{i.value}} </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> function getcascaderobj(val,opt) { return val.map(function (value, index, array) { for (var itm of opt) { if (itm.value == value) { opt = itm.children; return itm; } } return null; }); } </script> <script> var app = new vue({ el: '#app', data: { vals:[], val: [], options: [{ 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: '组件交互文档' }] }] }, methods: { handleitemchange() { this.vals=getcascaderobj(this.val, this.options); } } }) </script></body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
nodejs如何使用http模块编写上传图片接口测试客户端
python3如何通过qq邮箱发送邮件
以上就是element ui级联选择器怎样获取级联对象的详细内容。