【前端】项目中遇到的问题汇总（长期更新）

一、联调交互类

1、出现一个数据在当前页面进行了修改，另外一个页面的同一数据并未同步更改

当前的数据经过调用接口修改更新以后，if(code == 200) 将当前数据存入store.dispatch, 然后另一个地方获取该数据，直接获取存入的数据，这样就可以同步显示了

let XXX=computed(() => { return store.getters.***}        //直接XXX.数据拿到就是同步的

2、给菜单项加权限，不显示管理员独有的菜单项

利用filter来传，但是不能直接在菜单的数组使用，这样会出现管理员打开页面没有该菜单项，需要二次刷新页面才出现，后也尝试在onMounted里写，结果仍需要二次刷新才出现

最后的解决方法1：

//template里传MenuList
let managerMenu= computed(() => {return store.getters.managerMenu;
});//过滤掉管理员的菜单项，if里的条件看接口怎么定义、怎么存数据的
const menu = [{……}];
const menuList = computed(() => {if(managerMenu.value.length == 0) {return menu.fliter((item) => {return item.path != "XXX";});}else return menu
});

方法2：

//menu里不放管理员的菜单项
const menu = [{……}];const menuList = computed(() => {if(managerMenu.value?.length > 0) {return [...menu, ...[{menuName: XXX, menPath:XXX,……}] ];}else return menu
});

3、路由跳转到某个页面，并显示某个标签

// 1、先设置对应的路由进行跳转
router.push("/" + item?.menuPath);// 2、跳转点击的菜单项XXX
if(item.menuName == XXX) {store.dispatch("app/menu", "***");
}//push是跳转当前页面，resolve+window.open则是跳转新页面//push支持query和params，resolve只支持query，若没用query传参，也可以用localStorage
const routePath = router.resolve({path:XXX, query:XXX,});
window.open(routePath.href, "_blank");
localStorage.setItem('a', 1);

4、为简化代码，调多个接口可用三目运算符写入一个函数

const xxParams = ref({……})
const getList = async () => {
const { code, data} = await API.XXX[xxId ? "methodAPI1" : "methodAPI2"](xxParams.value);
if(code == 200) {……}

5、使用ElementUI的无线滚动加载 v-infinite-scroll，出现一直可以滚动的情况

默认情况下，infinite-scroll-disabled是false

方法1：可以在v-infinite-scroll="loadMore"的loadMore方法中限制达到列表长度就return;

方法2：

// 标签里写infinite-scroll-disabled="disabled"
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>const loading= ref(false)
const loadMore = () => {loading.value = true; ……}
const noMore= computed(() => return list.length >=20)    //eg:表长度限制
const disabled = computed(() => return loading || noMore

 

二、CSS样式类

1、兄弟div盒子实现并排

1、设置其父容器盒子的样式为 display: flex; （常用）

2、两个盒子都用float:left，再用定位调整。（脱离文档流）

2、多个兄弟盒子设置样式简单方式

如果使用v-for遍历，可以利用index和个数n，用三目运算符来写样式：

        :style="marginRight: (index+1) % n == 0 ? '0' : '5px' "

3、用el-input写登录输入框出现下边框消失

方法1：

        先看样式里面有没有设置相关样式，比如我遇到的问题就是设置了.el-input__wrapper的padding，这个时候按照浏览器的像素，eg：Edge1440宽来调整padding就可以调好。

方法2：

.el-input__wrapper {@media screen and (max-width: 1440px) {padding:***;}
}