element级联选择器选择获得完整数组(element级联选择器动态获取数据)

编辑：rootadmin

element组件的change方法默认获取的只有选择的id，如果同时我们想要获得选中的name或其他数据则是不行的这时候组件本身给我们提供了方法下面是使用方法 HTML <el-form-item label="排查地点" class="requireds-label"> <el-cascad ...

推荐整理分享element级联选择器选择获得完整数组(element级联选择器动态获取数据)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:element级联选择器多选,element级联选择器,选了一级菜单不能选二级菜单,element级联选择器原理,element级联选择器获取label,element级联选择器多选,element级联选择器获取label,element级联选择器多选,element级联选择器,内容如对您有帮助，希望把文章链接给更多的朋友！

element组件的change方法默认获取的只有选择的id，如果同时我们想要获得选中的name或其他数据则是不行的

这时候组件本身给我们提供了方法

element级联选择器选择获得完整数组(element级联选择器动态获取数据)

下面是使用方法

HTML

<el-form-item label="排查地点" class="requireds-label"><el-cascaderv-model="checkPlaceName_ids":options="regionInfoOptions":props="customProps"@change="handleChange"clearablefilterable></el-cascader></el-form-item>

script

根据不同需求获得数据，我这里需求是获得选择的最后一个id和选择的name‘/’分割拼接字符串

data() {return {checkPlaceName_ids:'', // 绑定回显的参数regionInfoOptions: [],// 请求接口获得的数组customProps:{value: 'id', // 自定义当前数组的键名label: 'name',children: 'children'}}}//element组件里的 getCheckedNodes获取选中的节点getCascaderObj(val, opt) {return val.map(function(value, index, array) {for (var itm of opt) {if (itm.id == value) {opt = itm.children;return itm;}}return null;});},handleChange(value) {this.form.checkPlaceCode = value[value.length-1];const vals = this.getCascaderObj(this.checkPlaceName_ids, this.regionInfoOptions); //选中节点数据var names = []for(var i =0;i<vals.length; i++) {names.push(vals[i].name)}var str = names.join('/');this.form.checkPlaceName = str; //赋值给发送的参数},

原文地址：vue级联选择器的getCheckedNodes用法_施玥喵的博客-CSDN博客_getcheckednodes

本文链接地址:https://www.jiuchutong.com/zhishi/310827.html 转载请保留说明！

上一篇：python如何获取列表的长度(python如何获取列表元素)

下一篇：简单更改DEDECMS模板背景色的方法(dedecms更新)