el-cascader应用

qq_41562817

已于 2024-01-29 09:03:41 修改

阅读量1.7k

点赞数 6

分类专栏：组件库文章标签： vue.js elementui javascript

于 2024-01-26 11:41:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41562817/article/details/135859661

版权

组件库专栏收录该内容

5 篇文章

订阅专栏

文章讲述了如何在Vue组件el-cascader中实现动态加载选项、编辑时数据回显、单选选中联动加载下一级数据以及在特定条件下控制下拉框显示。需求包括单选框触发下拉关闭和表格下钻功能的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习文章：el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点、点击标签选中-优快云博客

   <el-cascader
      ref="cascader"
      v-model="kjg" 
      :props="props" 
      @change="changKjg" 
      clearable
      :show-all-levels="false">
   </el-cascader>

   props: {
     lazy: true,
     lazyLoad: async (node, resolve) => {
          //...
       }
     },
     checkStrictly: true,// 父子结点断开联系
     emitPath: false,    // value值仅是当前结点，而非数组一长串下来
   },

此时：点击下拉项节点会展开下一级数据；选中单选框才会改变v-model的值，也算是清晰的操作步骤。

需求1：选择最后一级节点的时候，需要收起下拉框

（1）判断时机：点击单选框的时候

（2）由于val值为kjg这个变量，无法判断是否为最后一级节点，因此获取使用getCheckedNodes方法获取当前选中节点

（3）是否最后一级的条件，自由发挥，可以根据lazyLoad里设置的数据结构判断

    changKjg(val) {
      const node = this.$refs.cascader.getCheckedNodes();
      if (!node[0].hasChildren) this.$refs.cascader.dropDownVisible = false
    },

需求2：el-cascader 在动态加载数据项时，点击节点的单选框时，并不会加载下一级选项数据；希望点击单选联动加载下一级数据。

    changKjg(val) {
      // 当点击clearable时，不做处理
      if (val) {
        this.$nextTick(() => {
          const dom = document.getElementsByClassName("el-radio is-checked");
          //可以把dom打出来看了 是[length-1] 还是[0]
          let radioDom = dom[dom.length - 1];
          const brother = radioDom.nextElementSibling;
          brother.click();
        });
      }
    },

需求3：条件查询el-cascader与表格下钻结合：点击列表中的宁波 =》机构选中宁波，并加载宁波下一级数据，更新表格查询

    deepQuery({ xxxValue }) {
      // 实现了机构选择项为 宁波，即单选框被选中
      this.kjg = xxxValue ;    
      this.$nextTick(() => {
        // 加载选中项的下一级数据
        const dom = document.getElementsByClassName("el-radio is-checked");
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
        // 上一步加载数据的操作会展开下拉框，故手动收起下拉框
        this.$refs.cascader.dropDownVisible = false
        // 调用表格列表查询的接口
      });
    },