一、联调交互类
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
6、使用ElementPlus组件的tab标签用法
以标签tab为一级栏目切换，获取一级tab下的二级表利用一级tab的id来找，v-for需要指定key来进行排序，label显示当前一级的标题，name标识tab-pane，点击切换tab传入当前的一级item来获取二级表
<el-tabs v-model="firstTabId"><el-tab-panev-for="(item, index) in firstList":key="item?.id" :label="item?.name" :name="item?.id"@click="handleTabChange(item)"> </el-tabs>//先调用接口，获取firstList，再进行以下： const handleTabChange = (item) => {firstTabId.value = item.id;currentfirstTab.valuue = item;getSecondListData(item.id); //调用获取二级表的接口，传入一级id }
7、编辑当前表格行时，弹出抽屉修改表单数据，此时，修改表单数据与表格里的行数据变成了同步修改，点击关闭抽屉取消修改，但行数据还是发生了变化
该问题主要是因为数据是浅拷贝的，所以在表单里修改了，表格中已经自动更新了，所以需要在显示抽屉表单时，传入表格行数据进行深拷贝传入，这样就不会出现该问题
import _ from "loadsh"; //以下的param是表格传入的行数据，判断id主要是确认是否存在当前行数据，是否开启的抽屉编辑 const showDrawer = (param) => {if (param?.id) {formData.value = _.cloneDeep(param);……} }
8、对当前列表进行增改后台，在抽屉中怎么刷新父组件的列表
每次增删改查都需要刷新当前列表，删查在父组件直接进行，查的方法getTableList中获取当前列表接口，删的时候调用接口后在if(code==200)里最后再调用getTableList
而增改则需要弹出抽屉进行数据修改，修改后调用查的方法进行刷新列表，这种情况就需要在父组件定义时，传入 @refreshTable="getTableList"暴露给子组件，子组件通过defineEmits拿到
const emit = defineEmits(["refreshTable"]);
并在增改方法调用接口成功以后，最后emit该方法进行刷新列表：
emit("refreshTable", currentParentId.value); //传入当前列表所在的上一层级id
9、列表行拖拽排序-- 通过拖拽行拖拽图标进行重排序，序号、排序号均重排
利用Sortable方法，在onEnd调用排序方法，排序方法中先将当前表格数据备份，再用备份数据进行重排序，把原数据置空，再在nextTick中将备份重排序后的数据交给原数据，最后遍历表格数据数组，将sort利用index+1重排，最后调用接口刷新表格。
// HTML: <el-table-column prop="sortNo" label=" "><img class="handle" :src="drag-icon"/> </el-table-column>// CSS: .handle {cursor: move;display: flex;vertical-align: middle;margin: auto; } .sortable-format {opacity: 0.5;pointer-events: none; }// JS: //导入sortablejs---没下载依赖包，需进行下载npm i sortablejs @types/sortablejs import Sortable from "sortablejs/Sortable.js"; //可能会与个人按照依赖包有关系const sortTable= () => {const el = document.querySelector(".el-table__body-wrapper tbody");Sortable.create(el, {animation: 150,ghostClass: 'sortable-format', //拖拽样式handle: ".handle" //指定拖拽手柄的类名，如果需点击某个图标拖拽[需要把图标的class写在这里]// 结束拖动事件onEnd: ({ newIndex, oldIndex }) => {dragSort(newIndex, oldIndex);},}) }const dragSort = (newIndex, oldIndex) => {// 使用arr复制一份当前表格数组数据const arr = tableData.value;const currentRow = arr.splice(oldIndex, 1)[0];arr.splice(newIndex, 0, currentRow );// 将原数据数组置空tableData.value= [];nextTick(async () => {// 将拖拽排序后的数据赋值给原数据数组tableData.value= arr;// 提交后后台数据进行排序--遍历数组拿到index更新sort重排序let params = [];tableData.value.forEach((item, index) => {params.push({id: item.id,sort: index + 1,});});// 调用后台接口传参刷新列表const { code} = api.dragRowSort(params);if (code == 200) {getTableData(); //调用查询列表方法，刷新当前列表}}); }
10、使用ELementPlus组件的upload上传文件方法及图片回显
el-upload的使用：
需要传入请求头获取token，如果采用单独调用接口，则可以使用http-request，直接传入后端接口则用action
action放图片上传调用的后台方法，headers请求头携带token，file-list存放成功上传图片列表，用于修改功能时页面已有图片显示，before-upload图片上传前进行格式校验判断，accept指定文件类型，limit限制文件数目以上传单张图片为例：
<el-upload:headers="getHerders()"actionaccept="image/jpeg,image/png":file-list="imgFileList":limit="1":before-upload="handleImgBeforeUpload":http-request="uploadImg" ><img :src="uploadImgUrl" /> </el-upload>// 上传登录背景图 const uploadImg= async ({ file }) => {let formData = new FormData();formData.append("file", file);//调用接口传入当前图片try {const { code, data } = await api.getImg(formData, {headers: {"Content-Type": "multipart/form-data", },});if(code == 200) {//获取当前上传的图片的路径currentFile.value.filePath = data; // lookImg是查看图片的接口方法，用于回显图片uploadImgUrl.value = lookImg(data); }} catch (error) {return Promise.reject(error);} }
二、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:***;} }