el-cascader 级联选择器使用时遇到的一些问题
<el-form-item label="章节" style="margin-right: 64px">
<el-cascader
ref="cascader"
:value="contentChascascader" //是数组,存的是当前数据的value。一般是多个值
:props="this.$store.state.selectorMod.cascaderProps"
:options="this.$store.state.selectorMod.contentChas" //渲染数据
:show-all-levels="false" //输入框中不显示选中值的完整路径
:change-on-select="true"
@change="handleContentChaChange"
style="margin-bottom: 10px;width: 240px;"
>
</el-cascader>
</el-form-item>
我遇到的问题:当进入到编辑页面时,后台传来的只有最后一级的id,也就是说value数组里存的只有一个数,没有父级的id。这就导致无法在选框中显示出来label
解决办法:因为可以从后台获取到整个数据结构,发现子对象都有parentId这个属性,所以编写了getCascaderObj方法手动获取级联id。
思想:拿到value值,遍历options
getCascaderObj(val,opt) {
var thisVue=this
return val.map(function (value) {
for (var itm of opt) {
if (itm.id == value) {
// console.log("成功匹配")
thisVue.chapterArr.unshift(itm.id)
// console.log("第二步找父级。。。")
// console.log("parentId:"+itm.parentId)
thisVue.getCascaderObj([itm.parentId],thisVue.$store.state.selectorMod.contentChas) return
}else{
if(thisVue.isHasChid(itm)){
thisVue.getCascaderObj(val,itm.childs)
}
}
}
return null;
});
},
注意:上述方法中的参数val应该是一个数组。
另:
给 cascader 组件一个别名,然后用 this.$refs[关联组件名].currentLabels 就能取到选中的 labels
el-cascader 级联选择器使用时遇到的一些问题的更多相关文章
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- ElementUI组件Cascader级联选择器数据后台处理
Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...
- element-ui Cascader 级联选择器示例
<html> <head>test</head> <style> @import url("http://unpkg.com/element- ...
- ElementUI 之 Cascader 级联选择器指定 value label
ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...
- Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
- element 的 Cascader 级联选择器设定默认值
Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...
- Element-ui Cascader 级联选择器 同时返回 value 和 label
给 cascader 组件赋值一个别名 ref="cascaderAddr" <el-form-item label="部门" prop="or ...
- Cascader 级联选择器无法赋值
问题: html: <el-cascader v-model="addform.qxvalue" :options="options" :props=&q ...
随机推荐
- case when then的用法
用法一:等值判断,相当于switch CASE expression WHEN value1 THEN returnValue1 WHEN value2 THEN returnValue2 WHEN ...
- いろはちゃんとマス目 / Iroha and a Grid (组合数学)
题目链接:http://abc042.contest.atcoder.jp/tasks/arc058_b Time limit : 2sec / Memory limit : 256MB Score ...
- Compare AURO OtoSys IM100 with OtoSys IM600
The main difference lies in Mercedes-Benz, VW, Audi software and adapters to work with. Software dif ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- MyEclipse与Eclipse配置清单
MyEclipse与Eclipse配置清单 1.编码设置 workspace -> 设置全局编码utf-8 修改JSP编码(Encoding)为UTF-82.Java配置 格式 ...
- linux下nginx编译安装
步骤: 1.获取nginx安装包. 进入nginx官网:http://nginx.org/ 找到稳定版本: 点击红框内的链接. 使用wget获取安装包. wget http://nginx.org/d ...
- cannot_delete_plugins_expand_dir "/var/lib/rabbitmq/mnesia/rabbit@iZbp1iiexwyqe7tpjigcg9Z-plugins-expand"
[root@iZbp1iiexwyqe7tpjigcg9Z rabbitmq]# cat startup_err /usr/lib/rabbitmq/bin/rabbitmq-env: line 91 ...
- Linux普通用户不能使用TAB键、上下键
出发点 今天安装使用kail linux的时候发现tab键命令不能补全, 结合ubuntu, 因默认ubuntu创建的普通帐号,默认shell为/bin/sh,而这不支持tab等键的,所以将「指定用户 ...
- C# 发送16进制串口数据
一个困扰两天的问题:需要通过串口向设备发送的数据:0A010 7e 08 00 11 00 00 7e 76 7f我先将每个16进制字符转换成10进制,再将其转换成ASCII码对应的字符. /// & ...
- js通过 URL下载文件
页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...