el-cascader 懒加载实现动态添加children数据

最新推荐文章于 2024-06-19 15:46:35 发布
最新推荐文章于 2024-06-19 15:46:35 发布
阅读量152 收藏
点赞数 1
文章标签： vue.js css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44997474/article/details/139327198
版权

在这里插入图片描述
需要实现三级联动 但是后台数据不是视图组件所需要的嵌套关系
在这里插入图片描述
我们后台的接口数据 需要上层的字段去掉接口请求下层的数据 这样就麻烦很多
在这里插入图片描述
总结一下步骤：

  1. dom在这里插入图片描述
    data
    在这里插入图片描述

2.初始数据 mounted
在这里插入图片描述

3 懒加载绑定的函数
在这里插入图片描述

样式问题 使用deep不起效 用popperClass=“multi-choose” ，注意style没有scoped
在这里插入图片描述

黄哈哈_123
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
el-select如何实现懒加载（带搜索功能）
qq_42931285的博客
07-03 2071
el-select如何实现懒加载（带搜索功能）
element-plus el-cascader 懒加载实现-省市区街道选择及回显
Li_Ning21的博客
05-07 808
【代码】element-plus el-cascader 懒加载实现-省市区街道选择及回显。
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
01-21
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址（引用）传递，动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uniapp-cascader
11-14
基于uniapp 开发的级联选择器，支持h5和小程序，支持配置选择样式、支持配置两级和三级，支持配置单选和多选
实现el-cascader组件点击文字即选中效果
05-30
实现el-cascader组件点击文字即选中效果
JS面试题第一章
最新发布
2301_79858637的博客
06-19 207
undefined表示的是无的原始值。但是null表示的是无 对象 0。
vue面试题汇总之响应式理解
fyw1789的博客
06-12 442
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
Webpack + Vue
2401_85123689的博客
06-15 821
/使用路由routes: [//路由路径，对应一个 url//路由别名 ，vue.js内部使用的名称//组件，对应.vue页面的名字})当用户访问时，就会渲染文件，定义了该路由在 vue.js内部的名称2 创建一个新的Component之前在路由中引入了 component ，接下来，就是创建这个文件 📂页面效果原生 Vue.js的代码存在于 new Vue({……}）中的代码，在Webpack 框架下，都应该放到`export default{……}`代码块中。
vue:对三种获取更新后的dom的方式进行分析
qq_45820271的博客
06-17 690
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 888
Vue在表单校验中trigger属性指定何时触发校验规则
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 319
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
vue格网图
南北粉面馆
06-16 304
【代码】vue格网图。
elementui表格el-table最右侧操作列展示不完全
qq_46376192的博客
06-17 213
elementui表格el-table最右侧操作列展示不完全,有横线
Vue3+ECharts
清晨-阳光的博客
06-17 245
在Vue3中，初始化echarts实例时，会将echarts实例对象转换成响应式对象，从而在resize时无法获取需要的数据。
vue面试题
笃励的博客
06-14 445
函数的返回值是一个对象，这个对象上的属性会被合并到组件的渲染上下文中。你可以在这个对象上定义响应式状态、计算属性、方法等，并在模板中直接使用它们。函数的一个主要作用是提供了一种更灵活的方式来组织和复用组件逻辑。等函数，你可以将相关的逻辑放在一起，而不是像 Options API 那样将它们分散在。函数是一个新的组件选项，它是 Composition API 的入口点。函数的参数和返回值来访问和暴露组件的状态、属性和方法。，并将它们返回，以便在模板中使用。以下是一个简单的示例，展示了如何在。
vue 修改页面 刷新页面 增删改 provide / inject
global_coding的博客
06-13 1070
vue 修改页面 刷新页面 增删改 provide / inject
Vue 3 的 setup 函数使用及避坑指南
笔记、经验、日常分享
06-15 548
Vue 3 的 setup 函数是 Vue 3 Composition API 的核心部分，它使得代码的复用和组织变得更加简单。
el-cascader懒加载
02-24
el-cascader是Element UI库中的一个组件，用于实现级联选择器。懒加载是指在级联选择器中，当某一级选项被选择时，动态加载下一级选项的数据，以提高性能和用户体验。 在el-cascader中实现懒加载需要以下步骤： 1. 在级联选择器的数据源中，为每个级别的选项设置一个`lazy`属性，用于标识该级别是否需要懒加载。 2. 通过监听级联选择器的`change`事件，在事件回调函数中获取当前选中的值，并根据该值判断是否需要进行懒加载。 3. 如果需要懒加载，则通过异步请求获取下一级选项的数据，并将数据设置到级联选择器的`options`属性中。 4. 当用户选择下一级选项时，重复上述步骤，实现级联选择器的连续懒加载。 下面是一个示例代码，演示了如何在el-cascader中实现懒加载： ```html <template> <el-cascader v-model="selectedOptions" :options="options" @change="handleCascaderChange" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: '1', label: 'Option 1', lazy: true // 设置需要懒加载 }, { value: '2', label: 'Option 2', lazy: true // 设置需要懒加载 } ] }; }, methods: { handleCascaderChange(value) { // 判断是否需要懒加载 if (value.length === 1 && value[0] === '1') { // 模拟异步请求获取下一级选项的数据 setTimeout(() => { const nextOptions = [ { value: '1-1', label: 'Option 1-1' }, { value: '1-2', label: 'Option 1-2' } ]; // 设置下一级选项的数据 this.options[0].children = nextOptions; }, 1000); } }, loadOptions(node, resolve) { // 模拟异步请求获取下一级选项的数据 setTimeout(() => { const nextOptions = [ { value: '2-1', label: 'Option 2-1' }, { value: '2-2', label: 'Option 2-2' } ]; // 设置下一级选项的数据 resolve(nextOptions); }, 1000); } } }; </script> ``` 在上述示例中，`options`数组中的每个选项都设置了`lazy`属性为`true`，表示该级别需要懒加载。在`handleCascaderChange`方法中，根据当前选中的值判断是否需要进行懒加载，并通过异步请求获取下一级选项的数据。在`loadOptions`方法中，模拟了异步请求获取下一级选项的数据，并通过`resolve`函数将数据设置到级联选择器中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值