element UI级联选择器---动态加载数据,动态控制二级面板的显示与隐藏

 一级数据列表是在页面初始化的时候调用接口返回的数据;

二级数据列表需要在获取到一级数据id的时候调用接口得到数据进行列表渲染;

问题:

使用了el-cascader后发现如果第一次点击父级A获取到二级数据,并且二级面板显示,第二次点击父级B获取到二级数据为[ ],此时二级面板不仅没有隐藏,同时展示的仍然是父级A的二级数据;

解决方法:

获取到二级面板的元素,通过方法进行display的显示与隐藏;

<template slot-scope="{disabled,size}" slot="packageIdSearch">
  <el-cascader
    v-model="search.packageId"
    :props="hostProps"
    :options="hostOptions"
    placeholder="请选择适用host"
    clearable
  >
    <template slot-scope="{ node, data }">
      <span @click="parentNode(node)" style="display:block;">{{ data.label }</span>
    </template>
  </el-cascader>
</template>
data() {
  return {
    hostProps: {
      lazy: true,
      checkStrictly: true,
      lazyLoad: (node, resolve) => {
        if (node.data) {
          this.getHostVersion(node, node.data.id, resolve)
        }
      }
    },
    hostOptions: [],
  };
},

mounted() {
    getPackage().then((res) => {
      if (res.status == 200) {
        res.data.data.map((item) => {
          item.value = item.id
          item.label = (item.regionType == 'internal' ? '(D) ' : '(U) ') + item.nebulaPackageName
        })
        this.hostOptions = res.data.data
      }
    })
},

methods: {
    // 级联搜索适用host
    parentNode(node) {
      let el_node = document.querySelectorAll('.el-cascader-menu');
      if (el_node[node.level] && el_node.length > 0) {
        el_node[node.level].style.display = "block";
      }
    },

    getHostVersion(node, v, resolve) {
      let el_node = document.querySelectorAll('.el-cascader-menu');
      getversionList({ packageId: v }).then((res) => {
        if (res.status == 200) {
          let arr = []
          if (res.data.data.length > 0) {
            arr = res.data.data
            arr.map((item) => {
              item.value = item.id
              item.label = item.versionName + '('+ item.versionCode + ')'
              item.leaf = true
            })
            if (el_node[node.level] && el_node.length > 0) {
              el_node[node.level].style.display = "block";
            }
            resolve(arr)
          } else {
            if (el_node[node.level] && el_node.length > 0) {
              el_node[node.level].style.display = "none";
            }
            resolve([])
          }
          
        } else {
          resolve([])
        }
        
      })
    },
}

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值