级联选择器懒加载组件(element-ui级联选择器懒加载数据回显终极解决方案)

lazy-select懒加载选择器组件

由于el-cascader组件的级联选择器采用懒加载方案的情况下数据回显非常复杂，一般需要将回显数据的相关树形结构全部加载，这种情况下一是非常复杂，二是需要调用多次接口造成很大的资源浪费，所以自行二次封装了懒加载的级联选择器组件。
在处理数据回显时，需要接口返回相关的id和name(可根据情况自定义)组成的对象数组即可

git地址：https://github.com/BadMooncc/lazy-select

屏幕录制2023-02-02 13.09.49

安装

使用此组件前请确保安装了element-ui和 vue@2.x。

npm i [email protected] -S

全局引入

<script>import lazySelect from'lazy-select'

Vue.use(lazySelect)</script>

普通引入

<script>import lazySelect from'lazy-select'exportdefault{components:{
    lazySelect
  }}</script>

基本用法

<template><lazy-select:props="{
      label: 'deptName'
    }"lazynode-key="id":load="lazyLoad"v-model="demo"></lazy-select></template><script>let id =1exportdefault{name:'lazy-select-demo',data(){return{demo:[{id:5,deptName:'部门5'},{id:2,deptName:'书院2'}],}},methods:{lazyLoad(node, resolve){setTimeout(()=>{let  arr =[]
        arr.push({id: id,deptName:`部门${id}`,isLeaf:true})
        id +=1
        arr.push({id: id,deptName:`书院${id}`})
        id +=1resolve(arr)},300);},}}</script>

Attributes

参数说明类型可选值默认值empty-text内容为空的时候展示的文本String——node-key每个下拉节点选项用来作为唯一标识的属性String——props配置选项，具体看下表object——value(v-model)默认值array——lazy是否懒加载子节点，需与 load 方法结合使用boolean—falseload加载子树数据的方法，仅当 lazy 属性为true 时生效function(node, resolve)——indent相邻级节点间的水平缩进，单位为像素number—16icon-class自定义树节点的图标string——accordion是否每次只打开一个同级树节点展开boolean—falsecheck-on-click-node是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。boolean—false

props

参数说明类型可选值默认值label指定节点标签为节点对象的某个属性值string, function(data, node)——children指定子树为节点对象的某个属性值string——disabled指定节点选择框是否禁用为节点对象的某个属性值boolean, function(data, node)——isLeaf指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效boolean, function(data, node)——