elementui中的el-cascader级联选择器的实践

目录
  • 一、效果
  • 二、主要代码

一、效果

功能：使用接口调回来的数据，显示出可选的项，并开始有默认的选项值。

二、主要代码

<el-cascader ref="cascaderAddr" :options="rangeArr" :props="optionProps" v-model="plable"  @change="handleChange3" style="width: 100%;"></el-cascader>

解释：

（1）数据源不符合官方的数据源，需要重新指向

但是我们接口返回的数据源是这样的：

所以要重新指向一下value值、lable值以及children值（所以才有了:props=“optionProps”）；

（2）expandTrigger：次级菜单的展开方式click / hover，默认为click

（3）checkStrictly：是否严格的遵守父子节点不互相关联

export default {
	data() {
//配送位置选择源
			rangeArr: [],
			optionProps: {
				value: 'sguid',
				label: 'address',
				children: 'childs',
				checkStrictly: true,
				expandTrigger: 'hover'
			},
			plable: [], //配送选择值
},
mounted: function() {
//配送位置
		this.$axios
			.get('url')
			.then(response => {
				this.rangeArr = response.data.obj;
				console.log('配送可选择源aaaa', this.rangeArr);
			})
			.catch(function(error) {
				// 请求失败处理
				console.log(error);
			});
	//获取初始值
		this.$axios.get("url")
	    .then((response) => {
			if (response.data.status == 200){
			    this.plable=response.data.obj.ranges_sguid;//默认选中的值
			}
		})
		 .catch(function (error) { // 请求失败处理
	      console.log(error);
	    });
},
methods: {
handleChange3(value) {
			console.log('选中id值',value);
			console.log('选中lable值',this.plable);
			var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;;   //注意2： 获取label值
			console.log('lable',thsAreaCode)  // 注意3： 最终结果是个一维数组对象
			var len=value.length-1;
			this.form.ranges_sguid=value[len];//这是最终修改后的要提交的选中后的数据值
			console.log('guid',this.form.ranges_sguid);
			this.$refs.cascaderAddr.toggleDropDownVisible();// 选择之后将下拉界面收起
		}
}

到此这篇关于elementui中的el-cascader级联选择器的实践的文章就介绍到这了,更多相关element el-cascader级联选择器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Element Cascader 级联选择器的使用示例

    组件-级联选择器 基础用法 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader> </

  • Vue+ElementUI 中级联选择器Bug问题的解决

    最近在项目中需要用到级联这么个控件,所以便去element上找了个,发现了个问题,在这里跟大家分享下,介于公司项目的隐私性,所以一些文字便给大家打上马赛克了,敬请谅解~ 不多说废话,直接上问题: ElemenUI的级联是通过子级字段递归进行显示的,但是假如后端老铁也用了递归写的数据,而递归到最后一个数据集便出现了问题,会出现光有字段,但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题: 最后一级会多出来一个级联,这种体验便造成了很不好的感觉. 解决办法: 将获取这些级联的数据作为参数

  • 详解关于element级联选择器数据回显问题

    element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

  • elementui中的el-cascader级联选择器的实践

    elementui中的el-cascader级联选择器的实践

    目录 一.效果 二.主要代码 一.效果 功能:使用接口调回来的数据,显示出可选的项,并开始有默认的选项值. 二.主要代码 <el-cascader ref="cascaderAddr" :options="rangeArr" :props="optionProps" v-model="plable" @change="handleChange3" style="width: 100%;&qu

  • vue ElementUI级联选择器回显问题解决

    目录 1. 分析问题 2. 解决问题 1. 分析问题 [问题描述] 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model中的数据据重新放到 Cascader 级联组建后,会出现数据不回显的问题. [原因分析] 在级联组件中虽然在v-model中重新传入选中的数据,但采用了懒加载+远程数据的方式构建选项数据,此时级联组件的结构数据并未生成,此时仅有选中后的数据而没有选项数据,因此导致了级联选择器没有数据可供显示,也就导致了数据不回显

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

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • Android 中TeaPickerView数据级联选择器功能的实例代码

    Github地址 YangsBryant/TeaPickerView (Github排版比较好,建议进入这里查看详情,如果觉得好,点个star吧!) 引入module allprojects { repositories { google() jcenter() maven { url 'https://www.jitpack.io' } } } implementation 'com.github.YangsBryant:TeaPickerView:1.0.2' 主要代码 public cla

  • elementUI实现级联选择器

    elementUI实现级联选择器

    本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1.从后端调用接口,传递数据到前端 2.使用VUE代码显示级联选项 <el-cascader :disabled="isDisabled" :props="defaultParams" :options="options" v-model="selectedOptions" :show-all-levels="false&

  • 基于vue2.0实现的级联选择器

    基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联 web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况: 单个级联 (下拉选择框,单选) 单个级联 (多项选择) 二级联动 (省份和城市联动) 三级联动 (省市区联动) 在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备. 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数

  • 浅谈ElementUI中switch回调函数change的参数问题

    需求说明 八个switch组件,用同一个回调函数 switch组件状态发生变化时需要知道它目前开关状态 需要知道当前是哪个switch 问题描述 按照官方文档对switch事件的描述 事件名称 说明 回调参数 change switch 状态发生变化时的回调函数 新状态的值 下面这样写可以满足第二个需求,change回调函数中的参数callback就是开关当前的状态值,默认是boolean类型,但是第三个需求还不能解决. <el-switch v-model="value1" @

随机推荐