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

   <el-cascaderv-model="baseForm.selectAdressKeys"ref="cascader"@change="areaHandleChange":props="props"></el-cascader>

在data中定义props

 props:{checkStrictly:true,children:'children',lazy:true,lazyLoad (node, resolve){const {level}=nodesetTimeout(async ()=>{if(node.level==0){let params={code: "100000000000"}try {const res=await GetArea(params)const cities = res.data.map((value, i) => ({value: value.id,label: value.positionName,leaf: node.level >= 2}));// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(cities);} catch (error) {this.$message.error(error.message)}}if(node.level!==0){try {const res=await GetArea({code:node.value})const areas = res.data.map((value, i) => ({value: value.id,label: value.positionName,leaf: node.level >= 2}));// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(areas);} catch (error) {this.$message.error(error.message)}}},100)}}

vue级联选择框(Cascader)动态渲染数据相关推荐

vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
vue.Cascader 级联选择.Cascader 属性事件方法.vue Cascader 所有级联选择样式.vue Cascader 级联选择全部属性事件方法 Cascader 级联选择何时使用 ...
前端学习（1963）vue之电商管理系统电商系统之控制级联选择框的选择范围
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
element级联选择框的使用~干货分享
下面是对element级联选择框的使用介绍,跟小编来看看吧~ 文章目录使用级联选择框的步骤导入使用的级联选择框渲染级联选择框获取数据解决级联选择框过长问题级联选择框过长的问题及解决办法使 ...
SpringBoot导出word模板并动态渲染数据
导出word模板并动态渲染数据一.需求介绍背景:需要导出word模板的时候,有些数据是动态或者图片等不确定因素的时候.根据需求定制好的模板要求填充数据,那么这个时候就需要进行根据word模板进行动 ...
解决ElementUI级联选择框el-cascader任选一级的坑
在官方文档给出的示例中,el-cascader设置"props.checkStrictly = true"即可实现任意选择一级,但却只能点击左边的单选框选择节点,不能直接点击文字选 ...
iview级联选择组件的动态加载数据的使用与编辑回显
感慨就不多说了,心声万千,上代码. 1.页面组件,动态加载需要loadData,iview官网有写 <Cascader :data="treeData" :load-data ...
工作183：动态渲染数据数据在数字字典里面
1接口调用 /*调用接口*/created() {/*动态渲染content_type接口*/getAction("/dict/list",{dict_code:"con ...
解决使用element-ui级联选择框内容空白且下拉框过高
先看问题: ```bash<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width= ...
微信小程序循环显示多个Echarts图表，动态渲染数据
需求:需要在微信小程序中循环显示多个Echarts图表,动态渲染Echarts数据. 经查询,选择使用echarts插件. 在echarts官网中获取ec-canvas组件,放入至微信小程序中 1.w ...

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

vue级联选择框(Cascader)动态渲染数据相关推荐

最新文章

热门文章