Element cascader 级联选择器使用,及获取当前选中的对象

╰半夏微凉° 2023-01-08 10:30 677阅读 0赞

使用步骤:

1、html代码:

  1. <el-cascader
  2. ref="xzCascader"
  3. :props="xzProps"
  4. :show-all-levels="false"
  5. @change="xzHandleChange"
  6. placeholder="请选择行省市区"></el-cascader>

2、js代码—data()

  1. xzProps: { //省市区选项
  2. label: 'xzMc',
  3. value: 'xzId',
  4. lazy: true, //设置lazyLoad,必须配合lazy:true
  5. checkStrictly: true,
  6. lazyLoad: this.lazyLoadXzqh,
  7. },

3、js代码—methods

  1. // 懒加载--全国行政区划查询
  2. lazyLoadXzqh(node, resolve) {
  3. let { level } = node; // 获取当前node对象中的level属性
  4. let url = `${BaseUrl}/xzqh/get/xzQhListBySuperId`;
  5. let data = {
  6. superId:node.value?node.value:level==0?this.$store.state.userBean.xzQh:'' //主要的是,这个传值的变化
  7. }
  8. this.$post(url,data).then(res => {
  9. // console.log('全国行政区划查询 res=',res)
  10. if(res.code==200){
  11. let arr = res.data?res.data:[];
  12. for(let i in arr){
  13. if( arr[i].xzId.substring(0,2)=="11"){//北京市的
  14. if(arr[i].levelId=='5'){
  15. arr[i].leaf = true; //判断是否为叶子节点
  16. }
  17. }else{
  18. if(node.levelId=='4'){//到第4级
  19. arr[i].leaf = true;
  20. }
  21. }
  22. }
  23. resolve(arr)
  24. }
  25. })
  26. },

4、级联选择器,获取选中的当前对象

  1. / 选中的行政区
  2. xzHandleChange(val){
  3. const obj = this.$refs['xzCascader'].getCheckedNodes() //标签上定义的 ref值
  4. console.log('选中的行政区 obj.data=',obj[0].data) // 打印出当前选择的value所对应的对象
  5. },

发表评论

表情:
评论列表 (有 0 条评论,677人围观)

还没有评论,来说两句吧...

相关阅读