el-cascader 联级选择器动态加载子节点数据

先看我做的效果

可能每个人想要的效果不一样,我的只能做一个参考,一级数据是定死的,二级和三级数据是通过选中上级数据,请求回来的,

先看代码

              <el-cascader
                ref="cascader" // 全部选中是返回数据时需要
                size="mini"  // 可有可无
                style="width: 220px" // 可有可无
                @change="change" // 上传事件
                :props="props" // 必要,配置属性
                :options="options" //必要 可选项数据源,键名可通过Props属性配置
                clearable // 是否可以清空
              >
              </el-cascader>
<script>
export default {
 data(){
  return {
   options: [],
   props: {
    // multiple: true, // 开启只显示最后选择的值,按照需求来
    emitPath: false, // 设置 false࿰
### 解决 `el-cascader` 组件动态加载后的数据回显 对于 Vue 3 和 Element Plus 中的 `el-cascader` 组件,当采用懒加载方式来处理动态数据时,实现数据回显的关键在于确保组件能够识别并正确设置已选中的选项。这通常涉及到提供完整的路径信息给 `el-cascader`。 #### 单选级联选择器的数据回显 为了使单选模式下的 `el-cascader` 正常工作,在编辑状态下应传递整个路径作为默认值。这意味着不仅要知道最后一项的选择,还需要知道其父级以及更高级别的所有节点的信息[^1]。 ```javascript // 假设这是从服务器获取的一组已经选择了的城市ID const selectedCityIds = ['provinceId', 'cityId', 'districtId']; // 将这些 ID 转换成实际的文字描述形式用于展示 async function fetchLabelsByIds(ids) { let labels = []; for (let id of ids) { const response = await api.get(`/locations/${id}`); labels.push(response.data.name); } return labels; } fetchLabelsByIds(selectedCityIds).then(labels => { this.selectedOptions = labels; // 设置为 el-cascader 的 v-model 或者 :props="defaultProps" }); ``` #### 多选级联选择器的数据回显 在多选场景下,则需针对每一个被选中的项目重复上述过程,构建出多个完整路径,并将其赋值给 `v-model` 属性绑定的对象数组[^2]。 ```javascript this.multipleSelection = [ { value: ["path/to/first"], label: "First Option" }, { value: ["another/path"], label: "Second Option" } ]; ``` #### 关键配置属性说明 - **lazy**: 启用懒加载功能。 - **loadData(node, resolve)**: 定义异步加载子节点的方法,其中 node 表示当前节点对象,resolve 是一个回调函数用来返回子节点列表[^4]。 ```html <template> <el-cascader ref="cascaderAddr" style="width: 100%" size="large" placeholder="请选择地址" clearable filterable lazy :options="options" @change="handleChange" :props="{ multiple: true }"> </el-cascader> </template> <script setup lang="ts"> import { ref } from 'vue'; const options = ref([]); // 初始为空,等待用户触发展开事件后再去拉取具体某一层的数据 function loadData(node, resolve){ if (node.level === 0) { setTimeout(() => { resolve([ /* ... */ ]); }, 1000); } // 更深层次逻辑... } </script> ``` 通过以上方法可以有效地解决 `el-cascader` 在使用懒加载特性时遇到的数据回显难题。重要的是理解该控件期望接收什么样的输入——即完整的层级关系链表而非仅仅是末端项目的标识符。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值