修复element ui级联懒加载问题，二次封装成el-cascader-plus

最新推荐文章于 2024-04-26 09:30:00 发布
最新推荐文章于 2024-04-26 09:30:00 发布
阅读量1k 收藏 4
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43729052/article/details/129171927
版权

el-cascader-plus

经常碰到懒加载不回显的问题，使用起来很不方便，于是花了些时间二次开发了这个组件，下次遇到同样问题就能直接解决，在此开源出来，希望对遇到相同问题的人有帮助。开源互助使程序的世界更美好！

el-cascader-plus基于 element-ui 级联二次封装，弥补了原 element-ui 级联组件懒加载经常无法回显的不足，用法与原级联组件一致。

使用前请确保安装了 vue 和 element ui （或者已单独按需引入 element ui 的级联 Cascader）

版本推荐 "vue": "^2.6.11","element-ui": "^2.15.13",

配置参数同 ElementUI 的 Cascader 级联选择器，可参考其文档ElementUI 官方文档

新增的属性

参数说明类型可选值默认值
maxLevel懒加载最大层级，最小值0Number整数1000

git仓库https://github.com/fatelyh/el-cascader-plus

优化点：

1、修复原组件懒加载单选数据加载延迟的情况下不响应数据变动、不触发回显的问题   2、修复原组件懒加载多选不响应数据变动、不触发回显的问题 3、单选懒加载做了回显速度优化，比原组件单选懒加载回显速度会快一些 4、新增一个prop属性：maxLevel,可限制懒加载最大层级，整数，最小值0,默认值1000   5、props中的lazyLoad在原基础上对resolve做了一点小修改。


      props{
        lazy:true,
        lazyLoad:this.getNode
      }

      getNode(node, resolve) {
     //根据node获取子集操作
      resolve(params)
     // 其中params可为普通数据和promise(要有resolve值)
   }


效果预览

image
image

install 安装


npm i el-cascader-plus --save

使用

在 main.js 中写入下面的代码就可以全局使用


import elCascaderPlus from "el-cascader-plus";

Vue.use(elCascaderPlus);

在组件中单独使用


import elCascaderPlus from "el-cascader-plus";

export default {

  name: "demo",

  components: {

    elCascaderPlus,

  },

};

代码示例


<template>

  <div class="demo">

    <div class="mg20 title">el-cascader-plus</div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus单选</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="value"

        @change="change"

        :options="options"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus单选不关联</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="value1"

        :props="{ checkStrictly: true }"

        @change="change"

        :options="options"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus多选</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="multipleValue"

        :props="{ multiple: true }"

        @change="change"

        :options="options"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus多选不关联</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="multipleValue1"

        :props="{ multiple: true, checkStrictly: true }"

        @change="change"

        :options="options"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus懒加载单选</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="value"

        :props="props"

        @change="change"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus懒加载单选不关联</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="value1"

        :props="{ ...props, checkStrictly: true }"

        @change="change"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus懒加载多选</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="multipleValue"

        :props="{ ...props, multiple: true }"

        @change="change"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus懒加载多选不关联</div>

      <el-cascader-plus

        style="width: 400px"

        ref="cascader"

        v-model="multipleValue1"

        :props="{ ...props, multiple: true, checkStrictly: true }"

        @change="change"

      ></el-cascader-plus>

    </div>

    <div class="mg20">

      <div class="mg20">el-cascader-plus懒加载设置maxLevel为1</div>

      <el-cascader-plus

        :maxLevel="1"

        style="width: 400px"

        v-model="value2"

        :props="props"

      ></el-cascader-plus>

    </div>

  </div>

</template>

<script>

import elCascaderPlus from "el-cascader-plus";

export default {

  name: "demo",

  components: {

    elCascaderPlus,

  },

  data() {

    return {

      res: [],

      // 级联懒加载

      props: {

        multiple: false,

        lazy: true,

        lazyLoad: this.getNode,

      },

      value: [17, 18, 19],

      value1: [17, 18, 19],

      value2: [],

      multipleValue: [[17, 18, 19]],

      multipleValue1: [[17, 18, 19]],

      options: [

        {

          value: 1,

          label: "东南",

          children: [

            {

              value: 2,

              label: "上海",

              children: [

                {

                  value: 3,

                  label: "普陀",

                  leaf: true,

                },

                {

                  value: 4,

                  label: "黄埔",

                  leaf: true,

                },

                {

                  value: 5,

                  label: "徐汇",

                  leaf: true,

                },

              ],

            },

            {

              value: 7,

              label: "江苏",

              children: [

                {

                  value: 8,

                  label: "南京",

                  leaf: true,

                },

                {

                  value: 9,

                  label: "苏州",

                  leaf: true,

                },

                {

                  value: 10,

                  label: "无锡",

                  leaf: true,

                },

              ],

            },

            {

              value: 12,

              label: "浙江",

              children: [

                {

                  value: 13,

                  label: "杭州",

                  leaf: true,

                },

                {

                  value: 14,

                  label: "宁波",

                  leaf: true,

                },

                {

                  value: 15,

                  label: "嘉兴",

                  leaf: true,

                },

              ],

            },

          ],

        },

        {

          value: 17,

          label: "西北",

          children: [

            {

              value: 18,

              label: "陕西",

              children: [

                {

                  value: 19,

                  label: "西安",

                  leaf: true,

                },

                {

                  value: 20,

                  label: "延安",

                  leaf: true,

                },

              ],

            },

            {

              value: 21,

              label: "新疆维吾尔族自治区",

              children: [

                {

                  value: 22,

                  label: "乌鲁木齐",

                  leaf: true,

                },

                {

                  value: 23,

                  label: "克拉玛依",

                  leaf: true,

                },

              ],

            },

          ],

        },

      ],

    };

  },

  watch: {},

  methods: {

    change(e) {

      console.log(e);

    },

    // 获取当前点击节点的子node,根据node数据和后端交互，此处为模拟后端请求

    async getNode(node, resolve) {

      const {

        level, //层级

        value,

        data,

      } = node;

      // 模拟后端请求

      // 0级处理

      if (level == 0) {

        let options = JSON.parse(JSON.stringify(this.options));

        let nodes = options.map((v, index) => {

          delete v.children;

          return {

            ...v,

          };

        });

        setTimeout(() => resolve(nodes), 500);

      } else {

        this.res = [];

        let options = JSON.parse(JSON.stringify(this.options));

        for (let i = 0; i < options.length; i++) {

          this.findChildren(options[i], value);

        }

        // 去除子集的children

        let nodes = [];

        if (this.res.length) {

          nodes = this.res.map((v, index) => {

            delete v.children;

            return {

              ...v,

            };

          });

        }

        setTimeout(() => resolve(nodes), 500);

      }

    },

    //  找到某个树节点并返回子集

    findChildren(item, cid, flag = false) {

      if (item.value == cid) {

        flag = true;

      }

      if (flag && item.children && item.children.length) {

        this.res = [];

        this.res = item.children;

      }

      if (!item.children) {

        return;

      } else {

        item.children.forEach((child) => {

          this.findChildren(child, cid, false);

        });

      }

    },

  },

};

</script>

<style>

.mg20 {

  margin-top: 20px;

}

.title {

  font-weight: bold;

  font-size: 26px;

}

</style>

本文由 mdnice 多平台发布

孤鸿の影
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element el-cascader实现懒加载省市区多级联选
Liu_JiaqiPro的博客
07-26 1292
懒加载多级联选
使用element中el-cascader级联选择器动态懒加载以及回显 （单选）
weixin_41549971的博客
12-29 1769
使用element中el-cascader级联选择器动态懒加载以及回显 （单选）
el-cascader懒加载级联选择省市区
m0_43377799的博客
01-05 279
el-cascader懒加载级联选择省市区以及数据回显
【element-plus】解决级联选择器el-cascader在懒加载模式 使用filterable无法搜索
最新发布
近10年前端开发工作经验，为你分享日常经验所得
04-26 629
解决cascader级联选择器在懒加载模式无法搜索的问题
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
G佳伟
03-11 2295
修复element ui级联懒加载问题，二次封装成el-cascader-plus 第二步：使用el-cascader-plus 如需全局使用就在 main.js 中添加以下代码 在组件中单独使用在文件内添加以下代码 亲测完整代码示例 html
【sgLazyCascader】自定义组件：基于el-cascader的懒加载级联菜单，支持异步加载子级菜单
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-08 389
【代码】【sgLazyCascader】自定义组件：基于el-cascader的懒加载级联菜单，支持异步加载子级菜单。
动态懒加载级联选择器el-cascader输入及回显
lijingyu001的博客
09-06 1307
elementui文档提到的lazyLoad懒加载方法，回显做不出来，最后使用了简单粗暴的方法，欢迎大神指点。@change为选中节点事件，@expand-change为点击节点事件。
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @expand-change=censusLandChange :props={ va
element-plus---Cascader三级联动地区选择---json数据
08-19
适用于element-plus 的 Cascader三级联动地区选择---json数据，
uniapp-cascader
11-14
基于uniapp 开发的级联选择器，支持h5和小程序，支持配置选择样式、支持配置两级和三级，支持配置单选和多选
vue3+elementplus(el-cascader)实现全选功能
u011290962的博客
11-16 644
的代码，修改为标准的后端返回格式。
踩坑记29 一些用于 el-cascader 的工具函数
Alloom的博客
10-18 277
2021.9.24 坑89（el-cascader）：一些配置el-cascader 时写的工具函数。 允许选任意一级选项：配置 :props="{ checkStrictly: true }" 参考： Cascader 级联选择器 | ElementPlus (element-plus.org) // 获取适用于el-cascader级联选择器的数据树，传入data为树结构数组，children为其中对象的子树数组 export function getTreeForCascader(d..
Vue Eelement-UI 组件二次封装（三）：Cascader 级联选择器
qq_33991007的博客
09-03 3750
级联选择器有多种应用： <template lang="html"> // slot 插槽 修改选择器内部样式 <div class="block" :title="title"> <el-cascader ref="cascader" v-model="selectedOptions" :options="options" :props="props"
封装el-cascader 联级选择省市区
weixin_58224449的博客
11-10 715
1、首先创建一个cascaderAreaSome.vue文件。根绝业务要求，很多页面需要用到省市区选择。此疯转的省市区下拉选择支持多选，单选、回显。2、在main.js里面引用，绑定全局。
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-22 2180
/ 然后遍历 areaList 找到对应的 areaSeq 获取地区列表。// 遍历一级选择框，把二级选择框的数据放在一级的children属性上。// 先加一个最后层级的地区用于展示，最后在删掉。// 给当前areaCode添加children。，需要我们自动展开到天河区的下一级，效果如下。每一层级的数据，然后组成一个树。// 从后面开始遍历组成一个树。我的实现思路就是拿到。// 点击自动下拉出来。// 先初始调用一次。// 删掉最后选中的。
vue el-cascader 多选+懒加载，动态加载选项、单选不加载下一级节点、点击标签选中
weixin_42574985的博客
09-27 1550
通过是否haschlidren以及root是否为true就可在每次点击节点时循环判断，取到市级就在level等于1时判断，将获取到的市级新增 props里的leaf指的属性即可。本身node节点是可以打印的，但是无法循环赋值，打印出来有个小e，使用json格式转换拷贝、定时器等方法也无法做到，如果可以做到就不用怎么麻烦了。如题，后端接口需要一层一层传父id，所以多选的下拉框只能采用懒加载的方式，通过每次点击时的父id调用接口再渲染。
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
热门推荐
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
el-select内嵌套el-select---筛选下拉列表遇到的若干问题及解决
放弃不难，但坚持一定很酷！
01-11 3770
el-select内嵌套el-select遇到的若干问题及解决方案
c# 封装 jqgrid 表格搜索
06-07
在 C# 中封装 jqGrid 表格搜索，可以使用 jQuery 的 AJAX 功能向后端发送请求并获取数据，然后使用 JSON 序列化和反序列化来处理数据。以下是一个简单的示例： 首先，在前端页面中，你需要定义一个 jqGrid 表格，并且在表格上方添加搜索框和搜索按钮。这里假设搜索框的 ID 为 `searchInput`，搜索按钮的 ID 为 `searchButton`，表格的 ID 为 `grid`： ``` html <div> <input type="text" id="searchInput"> <button type="button" id="searchButton">搜索</button> </div> <table id="grid"></table> ``` 接下来，在 JavaScript 中，你需要定义一个函数来处理搜索请求，并使用 AJAX 向后端发送请求。这里假设后端接口的 URL 为 `/api/search`： ``` javascript function search() { var keyword = $("#searchInput").val(); $.ajax({ url: "/api/search", data: { keyword: keyword }, success: function(data) { $("#grid").jqGrid("setGridParam", { data: data }).trigger("reloadGrid"); }, error: function(xhr, status, error) { alert("搜索错误：" + error); } }); } ``` 在上面的代码中，`search` 函数首先从搜索框中获取关键词，然后使用 AJAX 向后端发送请求，请求参数中包含关键词。如果请求成功，就将返回的数据设置到 jqGrid 中，并触发表格重新加载的事件。如果请求失败，就弹出错误提示框。 最后，在 C# 后端中，你需要处理搜索请求，并返回符合搜索条件的数据。这里假设你使用 ASP.NET Web API 2 来处理请求，你可以这样编写控制器方法： ``` csharp public IHttpActionResult Search(string keyword) { var data = GetData(); // 获取原始数据 var filteredData = data.Where(d => d.Contains(keyword)); // 进行筛选 return Json(filteredData); // 返回 JSON 格式的数据 } ``` 在上面的代码中，`Search` 方法首先从数据源中获取原始数据，然后使用 LINQ 进行筛选，找出符合搜索关键词的数据。最后，将筛选后的数据以 JSON 格式返回给前端。 需要注意的是，这里的 `GetData` 方法需要根据你的具体业务逻辑来实现，它可以从数据库、文件、缓存等数据源中获取数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值