【转】el-cascade设置默认值遇到的坑！

Element-UI 在项目中的使用极大的提高了页面的开发效率，但是有些细节可能会让人掉到坑里，当然，今天这个坑不是Element带来的，而是 js 的数据类型不同造成的。

场景：cascade 中的两套选项值来源于不同的接口，
第一套选项：

let options = [{value: "495",label: "家政服务",children: [{ value: "96", label: "搬家", children: null },{ value: "102", label: "生活配送", children: null },{ value: "497", label: "房屋维修/防水", children: null },{ value: "498", label: "管道疏通/清洗", children: null },{ value: "511", label: "家具维修", children: null },{ value: "1818", label: "开锁/换锁/修锁", children: null }]},{value: "534",label: "商务服务",children: [{ value: "97", label: "快递", children: null },{ value: "212", label: "货运物流", children: null },{ value: "789", label: "货运专线", children: null },{ value: "1819", label: "建筑维修", children: null }]}
];

第二套选项：

let options = [{children: [{ label: "保姆/月嫂", value: 95 },{ label: "搬家", value: 96 },{ label: "生活配送", value: 102 },{ label: "电脑维修", value: 111 },{ label: "保洁清洗", value: 168 },{ label: "家电维修", value: 203 },{ label: "鲜花绿植", value: 484 }],label: "家政服务",value: 495},{children: [{ label: "快递", value: 97 },{ label: "工商注册", value: 125 },{ label: "印刷包装", value: 128 },{ label: "网站建设/推广", value: 130 },{ label: "设计策划", value: 199 },{ label: "货运物流", value: 212 },{ label: "办公设备维修", value: 309 },{ label: "财务会计/评估", value: 504 },{ label: "商标专利", value: 505 },{ label: "礼品定制", value: 1979 }],label: "商务服务",value: 534}
];

这两个结果有相同的数据格式，所以传给el-cascade的options都能显示正常

<el-cascader expand-trigger="hover"filterablesize="small":options="industryOptions"v-model="industry"@change="onChange">
</el-cascader>

发现问题
但是当需要设置默认值的时候就发现问题：

data() {return {industry: [495, 96],industryOptions: options};},

当使用第二套选项时，默认值会显示家政服务/搬家这是没问题的。但是当选用了第一套方案时，默认值却死活出不来。

最终查明原因，是因为在第一套中 value 值是字符串，而第二套的 value 值是数字。

处理方案：统一 value 的值类型

/**
* 递归将选项中的 value 值及其 children 里面的 value 都转换成数字类型
*
* @param {Array} options 选项，格式为: [{ value: 0, label: "", children: [{ value: 2, label: "" }] }]
*/
function parseValueToInt(options) {options.forEach(opt => {opt.value = parseInt(opt.value);if (opt.children && opt.children.length > 0) {parseValueToInt(opt.children);}});
}

需要从外部传入默认值的时候，也可以做一下适配：

this.industry = val.map(d => d && parseInt(d));

这是前端填坑之旅的第一站，养成遇到坑就记录下来是一个好习惯，一方面加深自己的印象避免再次掉进同一个坑，另一方面也能帮助更多掉到坑里的人找到解决方案（说不定那个掉到坑里的人还是自己……）

【转】el-cascade设置默认值遇到的坑！相关推荐

mysql关于时间的面试题,mysql时间设置默认值MySQL常见面试题
1.limit(选出10 到20 条) select * from students order by id limit 9,10; 2.MySQL 会使用索引的操作符号 =,>,=,betwe ...
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4 为外部参数设置默认值开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift ...
PowerDesigner中如何给字符串字段设置默认值 .
参考:http://www.cnblogs.com/navy235/archive/2011/10/18/2216443.html 在PowerDesigner12.5中,给varchar或nvarc ...
Elasticsearch 设置默认值的三种方式
1.实战问题在使用 Elasticsearch 过程中,不免还会有 Mysql 等关系型数据库的使用痕迹,以下两个都是实战开发问到的问题: Elasticsearch 新增字段,能在 Mapping ...
mysql给字段设置默认值，以及mysql的严格模式
一.背景在插入数据库时,报错#1364,后来才知道是字段在创建的时候,没有设置默认值的原因.关于默认值,我们都知道设置默认值为0或者null的时候,就算我们不插入该字段,数据库也会自动按照默认值填充 ...
html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来那如何修改呢? 上element ...
MySql折腾小记二：text/blog类型不允许设置默认值，不允许存在两个CURRENT_TIMESTAMP...
2019独角兽企业重金招聘Python工程师标准>>> 在 CYQ.Data 数据框架的反向工程中,遇到MySQL的问题又2个,记录下先. 1:对于时间的默认值,为:CURRENT_ ...
采购订单增强（根据公司代码、采购订单类型等相关订单信息给采购订单税码设置默认值）
根据公司代码.采购订单类型等相关订单信息给采购订单税码设置默认值: 使用BADI及方法: BADI : ME_PROCESS_PO_CUST Method: PROCESS_ITEM 在Method ...
jqueryeasyui datebox 设置默认值
2019独角兽企业重金招聘Python工程师标准>>> jqueryeasyui datebox 设置默认值记录坑点: 1.setValue 设置默认值,大家用的时候都说 ...
【Java代码】反射机制处理传递给mapper文件的非Map类型参数对象（指定属性为空则设置默认值）
1. why 为什么要拦截传递给 mapper 文件的参数对象呢?因为要对指定属性设置默认值.如何拦截传递给 mapper 文件的参数对象可以参考<使用(org.apache.ibatis.pl ...

【转】el-cascade设置默认值遇到的坑！

【转】el-cascade设置默认值遇到的坑！相关推荐

最新文章

热门文章