Element UI 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 级联选择器使用时遇到的一些问题的更多相关文章

  1. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  2. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  3. ElementUI组件Cascader级联选择器数据后台处理

    Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...

  4. element-ui Cascader 级联选择器示例

    <html> <head>test</head> <style> @import url("http://unpkg.com/element- ...

  5. ElementUI 之 Cascader 级联选择器指定 value label

    ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...

  6. Cascader 级联选择器

    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

  7. element 的 Cascader 级联选择器设定默认值

    Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...

  8. Element-ui Cascader 级联选择器 同时返回 value 和 label

    给 cascader 组件赋值一个别名 ref="cascaderAddr" <el-form-item label="部门" prop="or ...

  9. Cascader 级联选择器无法赋值

    问题: html: <el-cascader v-model="addform.qxvalue" :options="options" :props=&q ...

随机推荐

  1. case when then的用法

    用法一:等值判断,相当于switch CASE expression WHEN value1 THEN returnValue1 WHEN value2 THEN returnValue2 WHEN ...

  2. いろはちゃんとマス目 / Iroha and a Grid (组合数学)

    题目链接:http://abc042.contest.atcoder.jp/tasks/arc058_b Time limit : 2sec / Memory limit : 256MB Score ...

  3. Compare AURO OtoSys IM100 with OtoSys IM600

    The main difference lies in Mercedes-Benz, VW, Audi software and adapters to work with. Software dif ...

  4. Hybrid App中原生页面 VS H5页面(分享)

    本文部分转自  http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...

  5. MyEclipse与Eclipse配置清单

    MyEclipse与Eclipse配置清单 1.编码设置    workspace -> 设置全局编码utf-8    修改JSP编码(Encoding)为UTF-82.Java配置    格式 ...

  6. linux下nginx编译安装

    步骤: 1.获取nginx安装包. 进入nginx官网:http://nginx.org/ 找到稳定版本: 点击红框内的链接. 使用wget获取安装包. wget http://nginx.org/d ...

  7. 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 ...

  8. Linux普通用户不能使用TAB键、上下键

    出发点 今天安装使用kail linux的时候发现tab键命令不能补全, 结合ubuntu, 因默认ubuntu创建的普通帐号,默认shell为/bin/sh,而这不支持tab等键的,所以将「指定用户 ...

  9. C# 发送16进制串口数据

    一个困扰两天的问题:需要通过串口向设备发送的数据:0A010 7e 08 00 11 00 00 7e 76 7f我先将每个16进制字符转换成10进制,再将其转换成ASCII码对应的字符. /// & ...

  10. js通过 URL下载文件

    页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...