vue3+element遇到的问题记录

一.通过接口获取数据后，直接赋值给reactive()定义的变量，变量传输给子组件，期待是数据双向绑定。子组件实时更新，结果不行。

解决方案：查看官网后发现，reactive有一定局限性，所以reactive定义的动态数据不能整个赋值或直接=[]（指向地址会被更改），需要使用splice等方法（保留原地址指向）

例如：

let list = reactive([]);
// 获取列表数据 根据自己业务获取最新data
const getList = async () => {
    const data = await ......
    // 错误写法：
    list = data;
    lsit = [];
    // 正确写法：
    list.splice(0, list.length, ...data);
    list.lenght = 0;
};

二.修改element-plus的el-popover组件的样式(修改内边距等)

1.设置自定义类名

<el-popover 
	......
	popper-class="my-popover"
>

2.注意：
1）.修改el-popper样式 需要.el-popper+自己定义的popper-class值才可以， 直接修改my-popover不生效
2）.默认:teleported=“true”,是插入至body,元素与App平级，不能在加scoped的style里修改,deep也无法穿透，因为该组件不在当前组件内，建议自定义类名后写到全局样式或不带scoped的style里。
（当然也可以改为:teleported=“false”,会插入至当前组件，但需要注意样式问题）

.el-popper.my-popover {
    padding: 0 !important;
}

三.element-plus的el-cascader，本地没问题，但是上线后一点击下拉弹窗（el-popper）就关闭，不管是否选中。

最终解决方案：确认是element-plus版本问题，从2.3.0升级到 2.3.6，完美解决~
历史解决方案：发现el-cascader有一个togglePopperVisible()函数可以切换 popper 可见状态（缺点:首次加载组件后点击el-cascader弹出框可能会出现popper闪现问题）

// html handleSetInputMap(el,id)的id是其他组件传过来的
<el-cascader
	:ref="el => handleSetInputMap(el,id)"
	popper-class="my-cascader"
     ...
     @expand-change="handleExpandChange($event)"
     @visible-change="handleVisibleChange($event)"
/>

// js

// 动态赋值ref
const cascaderRefMap = ref({});
const handleSetInputMap = (el, id) => {
    if (el) {
        cascaderRefMap.value[`Input_Ref_${id}`] = el;
    }
};
const popperVisible = ref(false); // cascader弹窗状态
// 禁止点击后弹窗关闭
const togglePopperVisible = () => {
    if (!popperVisible.value) {
        cascaderRefMap.value[`Input_Ref_${id}`].togglePopperVisible();
    }
};
// 获取禁用的子选项
const getDisabledChildren = myCascader => {
    const checkboxs = myCascader.querySelectorAll(
        '.el-cascader-panel .el-cascader-menu .el-cascader-menu__wrap ul li .el-checkbox .is-disabled'
    );
    checkboxs.forEach(item => {
        nextTick(() => {
            item.onclick = () => {
                togglePopperVisible();
            };
        });
    });
};
// 卡片展开时
const handleExpandChange = value => {
    // 设置弹出框点击事件--禁止点击后弹窗关闭
    const myCascader = document.getElementsByClassName('my-cascader')[0];
    myCascader.onclick = () => {
        // 禁止点击后弹窗关闭
        togglePopperVisible();
    };
    nextTick(() => {
        getDisabledChildren(myCascader);
    });
};
// 卡片打开/关闭时
const handleVisibleChange = value => {
    popperVisible.value = value;
    if (value) {
        // 判断面板是否展开
        const myCascader = document.getElementsByClassName('my-cascader')[0];
        const menus = myCascader.querySelectorAll('.el-cascader-panel .el-cascader-menu');
        if (menus.length > 1) {
            // 打开时如果多个面板，设置弹出框点击事件
            handleExpandChange();
        }
        else {
            // 只打开一个面板 给当前面板设置点击事件
            const myCascader = document.getElementsByClassName('my-cascader')[0];
            myCascader.onclick = () => {
                togglePopperVisible();
            };
        }
    }
};

注：如果@change方法触发后也会关闭，在方法内调用togglePopperVisible（）即可

四.element-plus的el-cascader，动态赋值ref，代码同上