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"
                 filterable
                 size="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));

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