最近使用element-ui 的Casecader 级联对象时，后台要求将对象的label值也传过去，然而，element-ui 官方并没有提供这样方（keng）便 ( die ) 的方法。
一时间直是束手无策...
无奈只能通过遍历树来一一获取了：
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>
以上获取到的将会是一个数组，可根据数组来获取其中的label
作者：关爱单身狗成长协会
链接：https://www.jianshu.com/p/b3e40837ec1d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。