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

原创已于 2023-05-17 14:06:10 修改 · 3.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #级联选择器 #懒加载回显

于 2023-02-02 14:07:25 首次发布

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

文章介绍了在element-ui的el-cascader组件懒加载模式下，数据回显复杂且耗费资源的问题。作者提供了一个名为lazy-select的自定义组件，该组件简化了回显数据的处理，只需要接口返回id和name对象数组。文章提供了组件的GitHub地址、安装方式、基本用法以及相关属性说明，帮助开发者实现多选和懒加载的级联选择器功能。

lazy-select懒加载选择器组件

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

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

屏幕录制2023-02-02 13.09.49

安装

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

npm i lazy-select@1.0.2 -S

全局引入

<script>
import lazySelect from 'lazy-select'

Vue.use(lazySelect)
</script>

普通引入

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

基本用法

<template>
  <lazy-select
    :props="{
      label: 'deptName'
    }"
    lazy
    node-key="id"
    :load="lazyLoad"
    v-model="demo">
  </lazy-select>
</template>
<script>
let id = 1
export default {
  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 += 1
        resolve(arr)
      }, 300);
    },
  }
}
</script>

Attributes

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