一.通过接口获取数据后,直接赋值给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()即可