首页IT科技element 级联选择器默认值(element级联选择器选择获得完整数组)

element 级联选择器默认值(element级联选择器选择获得完整数组)

时间2025-05-04 19:22:55分类IT科技浏览3228
导读:element组件的change方法默认获取的只有选择的id,如果同时我们想要获得选中的name或其他数据则是不行的...

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

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

下面是使用方法

HTML

<el-form-item label="排查地点" class="requireds-label"> <el-cascader v-model="checkPlaceName_ids" :options="regionInfoOptions" :props="customProps" @change="handleChange" clearable filterable></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

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
linux鼠标变成x(linux 鼠标左右键互换实现代码) unix常用基本命令(分享20个 Unix/Linux 命令技巧)