vue中cascader实现hover懒加载click选中效果

cascader数据量过大，需要懒加载获取数据；需要选中触发事件，所以只能通过hover事件获取数据click事件选中（基于vue）

注意：active-item-change当父级选项变化时触发事件，仅在change-on-select为false时可用

/**
 * 级联框active事件
 * @param {Array} val cascader选中的值
 */
handleItemChange(val) {
    const menuIndex = val.length - 1;
    // 判断是否已加载过子级
    this.checkLoaded(this.organList, val); 
    const cascader = this.$refs.cascader.menu;
    const item = {};
    // 实现click事件
    this.$nextTick(() => {
        const elem = document.querySelectorAll(".el-cascader-menu__item.is-active")[menuIndex];
        elem.onclick= e => {
            item.value = val[menuIdex];
            item.label = e.currentTarget.innerText;
            cascader.select(item, menuIndex);
        };
    });
},
/**
 * 判断是否已加载过子级
 * @param {Array} list 机构列表
 * @param {Array} val cascader选中的值
 */
checkLoaded(list, val) {
    list.forEach(item => {
        // 前提是后台返回的数据结构中有子级的一定要有children字段（children: []）
        if (item.children) { 
            if (val[val.length - 1] === item.value && item.children.length === 0) {
                this.queryList(val);
            }
            this.checkLoaded(item.children, val);
        }
    });
},
/**
 * 获取除一级以外的机构
 * @param {Array} val cascader选中的值
 */
queryList() {
    // 后台接口，数据在res.data.list中
    .then(res => {
        this.packageData(this.organList, res.data.list, val);
    });
},
/**
 * 存放子级数据
 * @param {Array} list 机构列表-全局
 * @param {Array} data 机构列表
 * @param {Array} val cascader选中的值
 */
packageData(list, data, val) {
    list.forEach(item => {
        if(item.children) {
            if (val[val.length - 1] === item.value) {
                item.children = data;
                return;
            }
            this.packageData(item.children, data, val);
        }
    });
},
/**
 * 下拉框消失时触发事件 —— 根据机构获取用户数据
 * @param {Boolean} val 下拉框出现/隐藏时触发 出现-true 隐藏-false
 */
queryUserByOrgan(val) {
},
/**
 * 级联框没有选中时触发事件 —— 获取用户数据
 * @param {Array} val cascader选中的值
 */
queryAllUser(val) {
    if (!val || !val.length) {
        // http
    }
}

注意：后台返回的数据格式

[
    {
        value: "有子级id",
        label: "有子级name",
        children: []
    },
    {
        value: "无子级id",
        label: "无子级name",
    }
]
注：此处的children在级联框上会有显示下级的标志，如果没有children字段或null，下级的标志不会出现（即>标识）