el-cascader 多选数据不回显

### 解决 `el-cascader` 多选数据不回显的问题

对于 `el-cascader` 组件在多选模式下遇到的数据不回显问题，可以通过调整组件配置来实现正常显示。具体来说：

当设置 `multiple=true` 后，如果切换单双选状态可能导致原有绑定值无法正确映射至视图层，进而造成数据显示异常[^1]。

为了确保多选情况下能够顺利回显已选项，需注意以下几点：

#### 1. 正确传递路径数组作为初始值
由于 `el-cascader` 的工作原理依赖于完整的层级关系链路表示法——即每一项的选择都应由其所属的所有上级节点ID构成的一个列表形式给出；因此，在初始化时所提供的默认选定值也应当遵循这一规则，而不是仅仅提供最底层节点的信息[^3]。

例如：

// 错误做法：仅传入叶子结点 ID 列表
selectedValues = ['leafNodeId'];

// 正确做法：完整路径组成的二维数组
selectedValues = [
    ['parentId', 'childId'],
    ...
];

#### 2. 使用特定 props 属性优化行为
通过向 `props` 对象内增加额外字段可简化某些场景下的操作复杂度。特别是针对不需要展示全部祖先节点的情况，可以利用 `emitPath=false` 参数让最终提交的结果只包含末端子项的标识符，这有助于减少不必要的冗余信息传输并提高用户体验[^2]。

示例代码如下所示：

<template>
  <div>
    <!-- ... -->
    <el-cascader
      ref="cascaderRef"
      v-model="form.modelList"
      :options="options"
      clearable
      filterable
      placeholder="请选择"
      :props="{
        label: 'objectName',
        value: 'objectId',
        multiple: true,
        emitPath: false // 关键配置
      }"
      @change="handleChangeModelId">
    </el-cascader>
    <!-- ... -->
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const form = reactive({
  modelList: [], // 初始化为空数组或其他预设值
});

function handleChangeModelId(value) {
  console.log('Selected:', value);
}
</script>

上述方法可以帮助解决 `el-cascader` 在启用多选功能后的数据同步难题，使得前端页面能准确反映出后台下发的有效选择记录。