Element cascader 级联选择器使用,及获取当前选中的对象
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
使用步骤:
1、html代码:
<el-cascader
ref="xzCascader"
:props="xzProps"
:show-all-levels="false"
@change="xzHandleChange"
placeholder="请选择行省市区"></el-cascader>
2、js代码--data()
xzProps: { //省市区选项
label: 'xzMc',
value: 'xzId',
lazy: true, //设置lazyLoad,必须配合lazy:true
checkStrictly: true,
lazyLoad: this.lazyLoadXzqh,
},
3、js代码--methods
// 懒加载--全国行政区划查询
lazyLoadXzqh(node, resolve) {
let { level } = node; // 获取当前node对象中的level属性
let url = `${BaseUrl}/xzqh/get/xzQhListBySuperId`;
let data = {
superId:node.value?node.value:level==0?this.$store.state.userBean.xzQh:'' //主要的是,这个传值的变化
}
this.$post(url,data).then(res => {
// console.log('全国行政区划查询 res=',res)
if(res.code==200){
let arr = res.data?res.data:[];
for(let i in arr){
if( arr[i].xzId.substring(0,2)=="11"){//北京市的
if(arr[i].levelId=='5'){
arr[i].leaf = true; //判断是否为叶子节点
}
}else{
if(node.levelId=='4'){//到第4级
arr[i].leaf = true;
}
}
}
resolve(arr)
}
})
},
4、级联选择器,获取选中的当前对象
/ 选中的行政区
xzHandleChange(val){
const obj = this.$refs['xzCascader'].getCheckedNodes() //标签上定义的 ref值
console.log('选中的行政区 obj.data=',obj[0].data) // 打印出当前选择的value所对应的对象
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)