主要思路:通过 lazy 开启动态加载,并通过 lazyLoad 来设置加载数据源的方法。lazyLoad 方法有两个参数,第一个参数 node 为当前点击的节点,第二个 resolve 为数据加载完成的回调(必须调用)。
在开发中,使用elment ui 中 el-cascader 级联选择器,需要动态加载每级数据,以下代码根据个人项目二次封装cascader组件,每层均可动态异步加载数据。
<template>
<el-cascader
ref="cascader"
:props="casProps"
filterable
:options="projectAllList"
clearable
@change="handleChange">
</el-cascader>
</template>
<script>
import api from '../../service/api'
export default {
name: 'projectCascader',
data () {
return {
projectAllList: [{
projectId: '',
projectName: ''
}],
casProps: {
value: 'projectId',
label: 'projectName',
checkStrictly: true,
lazy: true, // 此处必须为true
lazy