element-ui el-cascader 数据回显

在 element-ui 的 el-cascader 中，可以通过 v-model 绑定选中的值，然后在选中值发生变化时触发 @change 事件，将选中的值保存到数据中，再在初始化时将数据中保存的值赋给 v-model 即可实现数据回显。

具体实现步骤如下：

1. 在 data 中定义一个变量，用于保存选中的值。

data() {
  return {
    selectedValue: []
  }
}

2. 在 el-cascader 中使用 v-model 绑定选中的值，并在 @change 事件中将选中的值保存到 selectedValue 中。

<el-cascader
  v-model="selectedValue"
  :options="options"
  @change="handleChange"
></el-cascader>

methods: {
  handleChange(value) {
    this.selectedValue = value;
  }
}

3. 在初始化时将 selectedValue 赋给 v-model。

<el-cascader
  v-model="selectedValue"
  :options="options"
  @change="handleChange"
></el-cascader>

mounted() {
  this.selectedValue = [1, 2, 3];
}

相关问题

Element-ui： el-cascader 单选回显

要实现 el-cascader 的单选回显，你可以使用 v-model 绑定一个变量来保存选择的值，并且在初始化时给这个变量赋初值。

首先，在你的 Vue 组件中添加一个变量来保存选择的值，比如 `selectedValue`：

data() {
  return {
    selectedValue: [], // 用于保存选择的值
  };
},

然后，在 el-cascader 上使用 v-model 将这个变量与组件绑定：

<el-cascader v-model="selectedValue" :options="options"></el-cascader>

其中 `options` 是你传入的数据源配置。

接下来，你可以根据需要在初始化时给 `selectedValue` 赋初值。如果你有一个初始的选中值，你可以将其赋给 `selectedValue`，这样组件就会自动回显选中的值。

例如，如果初始的选中值是 `[1, 2, 3]`，那么在组件的 `mounted` 钩子函数中给 `selectedValue` 赋初值：

mounted() {
  this.selectedValue = [1, 2, 3]; // 初始选中值
},

这样 el-cascader 就会根据 `selectedValue` 的值进行回显了。

注意：el-cascader 的数据源配置 `options` 需要符合一定的格式要求，你需要根据实际情况进行配置。详细的配置说明可以参考 Element UI 官方文档。

element-ui el-cascader 懒加载 多选 回显

### Element Plus `el-cascader` 组件实现懒加载与多选回显

#### 懒加载功能配置

为了使 `el-cascader` 支持懒加载，需设置属性 `options` 为空数组，并通过异步请求获取子节点数据。当用户展开某个节点时触发回调函数来加载该节点下的选项。

const loadOptions = async (node, resolve) => {
    const { value } = node;
    let result;

    try {
        // 假设这里调用了后端API并返回了响应结果
        result = await fetchChildNodes(value);
        
        // 将获取到的数据传递给resolve方法完成渲染
        resolve(result.map(item => ({
            value: item.id,
            label: item.name,
            leaf: !item.hasChildren
        })));
    } catch(error){
        console.error('Failed to load options:', error);
        resolve([]);
    }
};

此部分逻辑应放在组件内部定义的方法里[^1]。

#### 多选模式下保存已选择项

对于支持多选的情况(`multiple=true`)，可以通过监听输入框变化事件更新本地状态变量存储当前所选值：

<template>
  <!-- ... -->
  <el-cascader
      v-model="selectedValues"
      multiple
      :props="{ lazyLoad: true, checkStrictly: false}"
      @change="handleChange">
  </el-cascader>
</template>

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

let selectedValues = ref([]); 

function handleChange(values){
    // 更新selectedValues的状态
}
</script>

此处需要注意的是，在多选场景中，如果希望父级节点被勾选时不自动全选其所有子节点，则可以将 `checkStrictly` 设置为 `true`[^2]。

#### 编辑状态下恢复初始选择

为了让编辑页面能够正确展示之前已经做出的选择，可以在初始化阶段根据已有记录填充 `v-model` 对应的绑定字段。假设服务器端提供了完整的路径信息作为参数传入前端应用：

// 获取详情接口成功后的处理逻辑
async function getDetail(id:string):Promise<void>{
     const res=await api.get(`/api/detail/${id}`);
     
     // 如果是单选则直接赋值；如果是多选则遍历每一条记录分别push进去
     form.value.cascadeValue=res.data.singleSelect ? [res.data.path.split(',')] :
         res.data.multiPaths.map(path=>path.split(','));

     // 渲染视图...
}

onMounted(() => {
    if(route.params.id){ // 判断是否存在ID表示处于编辑态
          getDetail(String(route.params.id));
    }
});

上述代码片段展示了如何基于不同情况（单选或多选），利用逗号分隔字符串形式的路径构建起始值列表[^3]。