Element UI Cascader级联选择器默认选中值设置详解及问题排查

在使用Element UI的Cascader级联选择器时，设置默认选中值经常会遇到问题。本文通过一个实际案例，分析默认选中值设置失败的原因，并提供解决方案。

问题描述：

开发者尝试使用以下代码设置Cascader组件的默认选中值：

<el-cascader :options="region_tree" :props="{ multiple: true, value: 'id', label: 'title' }" :show-all-levels="false" class="custom-width" clearable v-model="get_city_id_list"></el-cascader>

this.region_tree = response.data.region_tree;
this.get_city_id_list = [3024, 3033]; // 数字数组

region_tree 和 get_city_id_list 的 id 值可以匹配，但Cascader组件无法显示预期的默认选中值。

Academic Writing Test

提供专业学术写作帮助，涵盖研究论文、文献综述、方法论与学位论文，严格遵守学术规范……

下载

问题排查与解决：

为了找到问题根源，我们构建了一个简化示例：

<template><el-cascader :options="options" v-model="value"></el-cascader></template><script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: "3024", // 字符串
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [],
            },
            {
              value: "3033", // 字符串
              label: "导航",
              children: [],
            },
          ],
        },
      ],
    };
  },
  created() {
    setTimeout(() => {
      this.value = ["3024", "3033"]; // 字符串数组
    }, 2000);
  },
};
</script>

通过该示例，我们发现问题在于v-model绑定的value属性的数据类型。value必须是字符串数组，而不是数字数组。 原始代码中get_city_id_list数组元素为数字，导致组件无法正确匹配options中的节点。 将get_city_id_list中的数字转换为字符串后，问题即可解决。

因此，需要确保后端返回的数据中的id字段为字符串类型，或者在前端将数字类型转换为字符串类型。 此外，使用setTimeout函数确保在组件渲染完成后再设置v-model值，可以避免数据初始化时机问题。