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

这篇具有很好参考价值的文章主要介绍了element UI级联选择器---动态加载数据，动态控制二级面板的显示与隐藏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element 级联选择器动态加载,Element-UI,vue.js,elementui,前端

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

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

问题：

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

解决方法：

获取到二级面板的元素，通过方法进行display的显示与隐藏；文章来源地址https://www.toymoban.com/news/detail-718936.html

<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([])
        }
        
      })
    },
}

到了这里，关于element UI级联选择器---动态加载数据，动态控制二级面板的显示与隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！