关于element-ui:修复element-ui级联懒加载问题二次封装成elcascaderplus

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 官网文档

新增的属性

git 仓库 https://github.com/fatelyh/el…

优化点：

  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 值)
   }

成果预览

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>