解决element-ui中 el-cascader 级联选择器最后一级数据为空显示暂无数据问题

CiL#

已于 2023-06-07 16:55:11 修改

阅读量2.1k

点赞数

分类专栏： Element UI 文章标签： elementui

于 2023-06-07 15:09:07 首次发布

本文链接：https://blog.csdn.net/KMINLIKE/article/details/131088111

版权

Element UI 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章讲述了在使用el-cascader组件时遇到的最后级别没有数据显示的问题，原因是后端返回的子级children为空。解决方案包括递归处理数据以确保所有层级都有children属性，并在选择最后一级后关闭下拉框。代码示例展示了如何处理数据以及在选项变更时的响应式操作。

摘要由CSDN通过智能技术生成

产生问题原因：

el-cascader 最后一级暂无数据是因为后端返回子级children为空，官网的children并不为空。

解决方法：

<el-cascader placeholder="请选择"
             v-model="dataForm.caseType"
             :options="caseTypeList"
             :props="{ label:'name',value:'id',children:'children',checkStrictly: true  }"
             clearable
             :show-all-levels="false"
             ref="cascader"
             @change="cascaderChange"></el-cascader>

    getTreeData (datas) {
      // console.log(datas)
      let data = []
      datas.map((item) => {
        if (item.children && item.children.length > 0) {
          let dadax = {
            name: item.name, // 这是需要展示的数据 我的数据是name，所以label对应的是name
            id: item.id,
            children: this.getTreeData(item.children)
          }
          data.push(dadax)
        } else {
          let dadax = {
            name: item.name,
            id: item.id
          }
          data.push(dadax)
        }
        return data
      })
      return data
    },
    cascaderChange (v) {
      let nodesObj = this.$refs['cascader'].getCheckedNodes()[0]
      this.dataForm.caseType = nodesObj.data.id
      // 选择最后一级后收起选择框
      !nodesObj.hasChildren && this.$refs['cascader'].toggleDropDownVisible()
    },
    init () {
      this.$nextTick(() => {
        this.$http.get('').then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.caseTypeList = this.getTreeData(res.data)
        })
      })
    },