vue.js element-ui 级联选择器

最新推荐文章于 2024-08-01 15:15:14 发布

_Kayo_

最新推荐文章于 2024-08-01 15:15:14 发布

阅读量416

点赞数

分类专栏：前端笔记 vue笔记文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/mashirokayo/article/details/127201037

版权

前端笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue笔记

11 篇文章 0 订阅

订阅专栏

有一个数组，级联选择器默认绑定的value值是value，下拉框的值是label，如果需要自己定义，修改props就可以了：

 <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' ,value:'code' ,label:'name'}"
    @change="handleChange"></el-cascader>

value: 选择下拉框返回给data的内容

lablel: 下拉框显示的内容

v-model: 把选择的下拉框内容存在哪里

发现一个重置级联选择器更简单的方法，把v-model绑定值置空也可以

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_Kayo_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

mashirokayo的博客

10-07

2456

vue.js 3.0 setup风格 element-ui clearCheckedNodes

element-UI 级联选择器

ZHuan20211123的博客

05-05

1214

厂商选中的数据发生变化，类型的下拉列表数据发生改变，且选中的值清空 <el-col :span="18" style="display: flex" class="itemCol"> <el-form-item label="厂商：" label-width="200px" prop="vendor" :rules="[ ...

参与评论您还未登录，请先登录后发表或查看评论

JS实现树型级联选择

08-04

用JS实现树型结构的级联选择..类似XP的资源管理器.

javascript：Cascader.js级联选择器

u013938578的博客

01-25

804

Cascader.js级联选择器，当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。7.1 参数：options {Object}选项说明类型必填elements用于实例化控件的select元素集合Array是data数据源Array是initValue初始化的值，可以是 value，也可以是 labelArray否占位符，设置索引对应的 select 元素的第一项 option，默认都是请选择Array否7.2 方法：setData设置数据源。

vue2-级联选择器

最新发布

jiuliangliang的博客

08-01

667

三级的级联选择器、可随意点击任意一级菜单，下拉框会隐藏，

js--事件--级联选择器

cmy741741的博客

11-09

1357

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>级联选择</t.

纯JS实现勾选级联选择器

不想被卷出去的前端老鸟

06-23

2908

纯JS实现勾选级联选择器

javascript处理树形结构数据（级联选择器，省市县联动）

qq_43955202的博客

01-18

2053

后端返回给我们数据： const dataList = [ { id: 1, pid: 0, name: '服装类', }, { id: 2, pid: 0, name: '手机类', }, { id: 3, pid: 0, name: '食品类', }, { id: 4, pid: 1, name: '连衣裙', }, { id: 5, pid: 2,

详解element-ui级联菜单（城市三级联动菜单）和回显问题

10-16

`<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model`绑定到`ruleForm.censusLand`，这使得菜单选择的值可以双向绑定到数据模型。级联菜单的配置项包括`placeholder`（占位提示）...

Vue3.0中Element-Plus级联选择器——直接输出所选中的最后一级的数据

08-08

2876

<el-cascader placeholder="试试搜索：北京" :options="options" :props="{ multiple: true }" filterable @change="checkedData" collapse-tags ref="cascadeAddr"><.

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

10-18

在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...

js 级联选择地区

12-03

from 表单选择详细选择地区，高效，取值方便，是个很不错的js。

cascaderjs级联选择器

08-12

级联选择器，当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择

html级联选择器,基于selectize.js实现的自定义级联选择器

weixin_42122432的博客

06-03

294

JavaScript语言：JaveScriptBabelCoffeeScript确定"use strict";// Listsvar designList = [{text: "Product Design",value: "product_design"}, {text: "User Interface Design",value: "ui"}, {text: "User Experience ...

Cascader js级联选择器

NewObjectNotFound的博客

12-07

1773

直接从我的github上搬过来的，见谅 Cascader cascader for javascript and base on jquery Introduction This is a small component removed from daily development. There are many imperfections. Please use it with caution Usage <link type="text/css" rel="stylesheet" href

js二级级联

czy的博客

04-12

372

js生成的级联下拉菜单级联下拉列表 --请选择-- 湖南湖北 --请选择-- var arr1 = new Array("长沙","衡阳"); //定义数组用来存储次级列表信息 var arr2 = new Array("武汉","黄冈"); var prov = document.getElementById('big');

JQuery/JS实现的三级联动选择

峰行天下

08-27

1663

前段时间做一个内部项目，要用到三级联动选择（就是三个select组件，他们之间相互影响）通过网上search和study，终于成功解决。要实现三级联动大致有2种实现方式：第一种：使用Ajax，这是最简单的一种。三个select（id分别为select1，select2，select3），首先发送ajax请求加载select1的options，当select1选择后再发送一个ajax请求得到对应的select2的opti

element ui级联选择器绑定数据数组

竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生

05-27

2302

级联选择器效果样式绑定值为数组数组只绑定最后一层级children的值（value字段）,无所选父级字段（value）选中设计原则下子集和导航下子集：代码 <template> <el-cascader :options="options" size="medium" class="myselect" v-model="arr" :props="props" collapse-tags clearable> </el-cascader&g

Elementui 组件库中的 Cascader 级联选择器绑定数据及级联选择器实现单/多选最后一级

qq_37675009的博客

01-12

1658

Elementui 组件库中的 Cascader 级联选择器绑定数据及级联选择器实现单/多选最后一级

vue项目 element-ui 级联选择器 el-cascader 回显的完美解决

05-12

对于 Element UI 的级联选择器 el-cascader，如果需要回显已经选中的值，可以通过设置 v-model 和 :options 属性来实现。假设有一个三级联动的级联选择器，选项数据如下： ``` options: [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }] }, { value: 'daohang', label: '导航', children: [{ value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' }] }] }] ``` 如果需要回显已经选中的值，可以将当前选中的值通过 v-model 绑定到 data 中的一个变量上，例如： ``` <el-cascader v-model="selectedOptions" :options="options" ></el-cascader> ``` 其中，selectedOptions 是一个数组，用于保存当前选中的值。接下来，需要在 mounted 钩子函数中设置已选中的值，例如： ``` mounted() { this.selectedOptions = ['zhinan', 'shejiyuanze', 'yizhi'] } ``` 这样，在页面加载完成后，级联选择器就会自动回显已经选中的值。需要注意的是，如果级联选择器的选项数据是异步加载的，需要在加载完成后再设置已选中的值，例如： ``` mounted() { this.loadOptions().then(() => { this.selectedOptions = ['zhinan', 'shejiyuanze', 'yizhi'] }) }, methods: { loadOptions() { // 异步加载选项数据 } } ``` 这样就可以实现 Element UI 的级联选择器 el-cascader 的回显功能了。