<template> <el-cascader :options="options" clearable></el-cascader> </template> export default { data() { return { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致', }, { value...
将以下方法赋值给lazyLoad函数即可实现回显了; 逻辑: cascaderData:是选择的参数最后一级id value:我们在选择是(鼠标点击选择的)会触发并返回id,如果没有选择点击,则返回undefined(我们就在这儿进行判断是回显还是手动触发) 先说回显:threeFind:我们根据有的最后一级id(cascaderData),去查找改数据并查询到他父级(two...
v-model="data.eventComboBoxValue" :props="cascaderProps" clearable /> 1. 2. 3. 4. 5. js: cascaderProps() { return { lazy: true, lazyLoad: this.lazyLoad }; } methods:{ async lazyLoad(node, resolve) { let level = node.level; let result; switch (level) { case 0: // 类型 let...
props{lazy:true,lazyLoad:this.getNode}getNode(node,resolve){//根据node获取子集操作resolve(params)// 其中params可为普通数据和promise(要有resolve值)} 效果预览 image install 安装 npm i el-cascader-plus --save 使用 在main.js 中写入下面的代码就可以全局使用 importelCascaderPlusfrom"el-cascader-plus...
<el-cascader :props="props"></el-cascader> props: { lazy: true, lazyLoad (node, resolve) { const { level } = node; setTimeout(() => { const nodes = Array.from({ length: level + 1 }) .map(item => ({ value: ++id,
1 leaf 标记为>=2就好了 <el-cascader :props="props" /> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 constprops: CascaderProps = { lazy:true, async lazyLoad(node, resolve) { ...
提升了单选懒加载的回显速度,使其比原组件更快。 引入了 maxLevel 属性,允许用户自定义懒加载的最大层级。 对 resolve 方法进行了微调,增强了 lazyLoad 的功能。要全局使用 el-cascader-plus,只需在项目的 main.js 中添加相关代码;在组件中使用时,参照下面的代码示例:要获取效果和进一步的安...
我对原组件的懒加载功能进行了优化,解决了单选和多选情况下数据变动不响应、回显延迟的问题。单选模式下的懒加载回显速度也得到了提升。此外,我还对lazyLoad的resolve函数进行了微调,以提升用户体验。要使用el-cascader-plus,你可以在main.js中全局引入,或者在具体的组件中单独使用。具体安装和使用方法,...
<el-cascader v-model="warehouseModel.warehouseAddress" :props="areaProps" placeholder="请选择省/市/区" ></el-cascader> const areaProps = { lazy: true, async lazyLoad(node: any, resolve: any) { const { level, data } = node; let nodes; switch (level) { case 0: nodes = await use...