Vue el-cascader级联进行懒加载功能实现

原创已于 2025-03-17 16:55:34 修改 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-17 16:45:29 首次发布

Vue el-cascader级联进行懒加载功能实现

话不多说直接看代码
动态加载
当选中某一级时，动态加载该级下的选项：
通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。 lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)。否则，将以有无子节点来判断其是否为叶子节点。
示例：

<template>
  <el-cascader :props="props" />
</template>

<script lang="ts" setup>
import type { CascaderProps } from 'element-plus'

let id = 0
const props: CascaderProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map((item) => ({
        value: ++id,
        label: `Option - ${id}`,
        leaf: level >= 2,
      }))
      // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
      resolve(nodes)
    }, 1000)
  },
}
</script>

实际操作：

<template>
  <div>
    <el-cascader
      style="width: 100%; height: 30px; padding: 0px; line-height: 35px; font-size: 14px;"
      ref="cascaderRef"
      placeholder="请选择行政区域"
      v-model="Materialform.RegionalismId"
      :options="options"
      :props="props"
    ></el-cascader>
  </div>
</template>
data(){
Materialform：{
	RegionalismId:[],
},
props: {
      value: 'value',
      label: 'label',
      expandTrigger: 'hover',
      lazy: true,
      lazyLoad: this.lazyLoad
      },
isModify: false, // 标识当前是新增还是修改操作
options: [],
created() {
this.loadInitialOptions()
},
// 加载第一级选项
loadInitialOptions() {
try {
	let that = this;
	that.options = [];
	that.http.ajax2({url: "/api/regions",
	postdata: true,
	success: function (result) {
		if (result.Status) {
		that.options = result.Data.map(x => {
		return {
			value: x.Id,
			label: x.Ext_Name,
			parentId: x.PId,
			leaf: false,
			children: []
		};
	});
}
},
type: "post",
async: false
});
return that.options;
} catch (error) {
console.error('加载初始选项失败:', error);
}
},
lazyLoad(node, resolve) {
	try {
          const { level, data } = node;
          if (level > 0) {
          const url = `/api/regions?pId=${data.value}`;
this.http.post(url, null, "加载中").then(result => {
if (result.Status) {
const children = result.Data.map(x => {
return {
        leaf: level >= 4,
        value: x.Id,
        label: x.Ext_Name,
        parentId: x.PId,
        children: []
        };
        });
// 将子节点数据添加到当前节点的 children 属性中
data.children = children;
resolve(children);
}
});
}
} catch (error) {
console.error('加载子节点数据失败:', error);
resolve([]);
}
},
// 新增操作
handleAdd() {
  this.isModify = false;
  this.selectedValues = [];
},
// 修改操作
async handleModify() {
  this.isModify = true;
  await this.loadOptionsForExistingValues();
  this.selectedValues = this.existingValues;
},
// 根据已有值加载选项
loadOptionsForExistingValues() {
let currentOptions = this.options;
for (let i = 0; i < this.Materialform.RegionalismId.split(',').length; i++) {
     const value = Number(this.Materialform.RegionalismId.split(',')[i]);
     const node = currentOptions.find(option => option.value === value);
      if (node) {
         if (i < this.Materialform.RegionalismId.split(',').length - 1) {
             if (!node.children || node.children.length === 0) {
                 this.loadChildren(node);
             }
             currentOptions = node.children;
      }
   }
  }
},
// 加载子节点
loadChildren(node) {
try {
console.log("1")
const url = `//api/regions?pId=${node.value}`;
this.http.post(url, null, "加载中").then(reslut => {
if (reslut.Status) {
let children = reslut.Data.map(x => {
    return {
            value: x.Id,
            label: x.Ext_Name,
            parentId: x.PId,
            };
})
node.children = children;
//node.Data.children = children;
//resolve(children);
   }
   })
} catch (error) {
console.error('加载子节点失败:', error);
 }
},

后台代码：

//控制器
 [HttpPost, Route("*名称*")]
 public async Task<IActionResult> *名称*(int pId = 0)
 {
     return JsonNormal(data: await Service.*名称*(pId));
 }
//写在IService
Task<WebResponseContent> *名称*(int pId = 0);
//--写在Service
/// <summary>
/// 懒加载树
/// </summary>
/// <param name="pId">父级Id</param>
/// <returns></returns>
public async Task<WebResponseContent> *名称*(int pId = 0)
{
  var list = await _repository.FindAsIQueryable(a => 根据上级ID判断).Select(a => new {字段}).ToListAsync();
  return _webResponse.OK(data: list);
}

代码解释：

created 钩子：在组件创建时调用 loadInitialOptions 方法，加载第一级的选项数据。
handleAdd 方法：处理新增操作，将 isModify 设为 false，并清空 selectedValues。
handleModify 方法：处理修改操作，将 isModify 设为 true，调用 loadOptionsForExistingValues 方法加载与已有值对应的选项，最后把 existingValues 赋给 selectedValues。
loadOptionsForExistingValues 方法：遍历 existingValues，根据每个值找到对应的节点，若该节点的子节点未加载，则调用 loadChildren 方法加载子节点。
lazyLoad 方法：当用户展开节点时，动态加载子节点数据。
loadChildren 方法：根据节点的 value 加载其子节点数据。

–那位大佬会动态选择层级，请教教我，
题目为：如果级联下级只存在一级则选择一级，如果级联下级存在四级则可以选择四级