【vue】-Element-UI之Cascader 级联选择器动态获取数据渲染

l_XIANA

已于 2022-05-25 20:33:51 修改

阅读量2.8k

点赞数

分类专栏： element-ui 文章标签： vue es6 html javascript vue.js

于 2021-07-02 16:37:48 首次发布

本文链接：https://blog.youkuaiyun.com/l_XIANA/article/details/118118132

版权

本文档展示了如何利用Element-UI的el-cascader组件，结合后台API动态加载分类数据。在层级关系中，根据节点级别分别调用不同的API获取数据，实现懒加载效果。当节点变更时，更新对应的分类ID并维护上级分类信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据element-ui提供的属性来实现
在这里插入图片描述

html

 <el-form-item label="活动分类">
     <el-cascader clearable placeholder="请选择活动分类"  v-model="classify_value" :key="refreshClassify" :props="classifyProps"  @change="handleChange"  ></el-cascader>
  </el-form-item>

data：

data() {
   
    return {
    
      classify_value: null, //分类id
      refreshClassify: 0

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

l_XIANA

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）

王二红

01-30

4795

vue，elementui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementUI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后

vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办

最新发布

Derlii的博客

03-21

1083

后端返回的接口是这样的需要前端处理成组件所需要的数据结构。

vue级联选择框(Cascader)动态渲染数据

m0_46693606的博客

04-27

1522

<el-cascader v-model="baseForm.selectAdressKeys" ref="cascader" @change="areaHandleChange" :props="props"></el-cascader> 在data中定义props props:{ checkStrictly:true, childre...

VUE Element-UI 的多级菜单动态渲染的组件

Wang_MengHan的博客

11-06

699

效果：以下是组件代码： <template> <div class="navMenu"> <label v-for="(navMenu,index) in navMenus" :key="index"> <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"

如何渲染ElementUI中级联选择器的数据

lvhanghmm的博客

09-13

491

如何渲染级联选择器的数据准备数据源当然一般在工作中的数据源是后台接口返回的【大多是数组对象!】！我这个数据是直接从后台保存下来的！级联选择器数据源上图写代码了！直接粘贴级联选择器的代码在官网上！ <template> <div id="container"> <el-card> <el-cascader ...

如何对级联选择器进行数据渲染

yzx125的博客

03-12

772

级联选择器是真的难倒我了，弄了很久要么就是没有数据要么就是子数据出不来，后来请教了一下师兄，也看了很多博文，勉强把显示做了出来组件部分： <el-cascader placeholder="请选择分类" v-model="tableQuery.id" @keyup.enter.native="search" :options="options" :props="optionProps" clearable ref="cascaderAddr" @change="handleCh.

基于vue+element-ui实现Cascader级联选择器+Table树形数据

椰卤工程师的个人博客

11-13

2350

开发进度提前50%，啊，真香。下面，看图说话 Table树形数据 Cascader级联选择器 功能实现+详细代码 Cascader级联选择器 options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。 element官网给出的options需要的数据格式： options: [{ value: 'zhinan', label: '指南', children: [{

Element-ui Cascader 级联选择器回显数据

大漠孤烟

02-04

2373

回显的方式两种情况： 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） 2.保存最后一位，递归回显（针对于每个人看到的菜单不一样，有的人能看到两级，有的人能看到三级，只保存最后一位，然后前端做一下处理）以下代码中的变量含义： resultJson：要回显的JSON串 navList：级联JSON数据（菜单父子结构数据） navIds：数据库保存的 2，3，4（需要回显的最后一位ID数组）直接使用JSON回显，数据库保存数组JSON串，回显

vue Element 利用Cascader 级联选择器实现三层选择器

weixin_44283571的博客

10-22

2499

在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。效果图实现过程实现这个功能需要用到Element这个框架中的Cascader 级联选择器，但是不是那个Cascader 级联选择器都适用于这种场景，其中我选择了Cascader 级联选择器中的动态加载选择器，链接 --> 添加链接描述这个选择器的好处就像你看到的那样它可以：动态加载，这也就意味着可以把我们的数

基于vue20实现的级联选择器

08-12

基于Vue的级联选择器，可以单项，二级，三级级联，多级级联

element ui 级联选择器，渲染后不显示数据

m0_60578224的博客

06-28

1193

element ui 级联选择器 渲染后不显示数据

vue+element ui中动态实现级联选择器 el-cascader踩过的坑

在路上`的博客

11-30

9786

实现效果图实现方法 html 备注：props 可初始化一些字段； change事件可以获取所需要的value 值 js 获取动态数据并赋值所需要的数组这样就基本实现了级联选择器，但是坑来了描述当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误（如果没有选择就不会报错的）分析这个错误的原因是当选择后，再更新内容时，选择器仍会关联原来的数据，导致找不到之前选择的元素。解决所以可以采用重新渲染的方式解决这个问题。

ElementUi级联选择器选择的数据渲染在div中

weixin_47055226的博客

04-22

1643

级联选择器选择的数据渲染在div中需求：将选择的数据渲染在div中展示。思路：当多选的时候是一个二维数组，单选时是一维数组，区分处理，不确定有多少层级，用递归实现，把拿到的数据放到数组里，然后处理成自己要的。`` <template> <div> <el-cascader v-model="value" :options="options" @change="handleChange" :props="props"

element-UI中级联选择器cascader的问题及解决

ss15363380815的博客

09-22

1878

-使用新版的cascader，通过官网的代码进行修改 <el-cascader :options="parentCateList" :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children', checkStrictly: true }" v-model="selectedKeys" @change="parentCa

Element 级联选择器动态加载

weixin_41897680的博客

01-18

2928

Element 级联选择器动态加载

element ui 级联选择器动态加载

zxl_start的博客

07-09

8626

利用elementui的级联选择器先请求第一级数据，当用户点击第一级节点时再根据点击节点的id请求它的子类并渲染 <el-cascader clearable placeholder="请选择" @change="handleChange" v-model="form.dsdCode" :props="cascaderProps" ></el-cascader>

Vue Element Cascader 级联选择器

lmf13992427957的博客

09-28

2935

因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select。特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变。