element el-cascader级联选择器 elementui中的el-cascader级联选择器的实践
本文讲解:“element el-cascader级联选择器 elementui中的el-cascader级联选择器的实践”以下是相关内容。
想了解elementui中的el-cascader级联选择器的实践的相关内容吗,huang_jimei在本文为您仔细讲解element el-cascader级联选择器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:element,el-cascader级联选择器,element,级联选择器,下面大家一起来学习吧。
一、效果
功能:使用接口调回来的数据,显示出可选的项,并开始有默认的选项值。
二、主要代码
<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();// 选择之后将下拉界面收起 } }
温馨提示
以上就是“element el-cascader级联选择器 elementui中的el-cascader级联选择器的实践”这篇文章的所有内容了,相信大家也都认真的看完了,如果大家还有不懂的问题,可以通过搜索来获取更多相关的内容,最后记得给蓝图技术网小编点个赞以及收藏内容。免责声明:
1、本站所有资源文章出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。
2、本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户擦亮眼睛自行鉴别,做一个有主见和判断力的用户。
3、本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
4、侵权违法和不良信息举报 举报邮箱:cnddit@qq.com
还没有评论,来说两句吧...