解决方案：Springboot+Vue3+Mybatis+Axios 前后端分离项目中 遇见的若干报错和踩坑避坑（二）

Postman测试成功，实际项目测试失败

问题：createError.js?be90:16 Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js?be90:16:1) at settle (settle.js?d43b:17:1) at XMLHttpRequest.onloadend (xhr.js?e02e:66:1)

明明在postman测试都能添加上数据，到了vue中测试显示400错误。

问题原因1：前端的参数传输有问题，与postman上面测试的不一样

解决方案1：查看request里的参数，字母大小写，参数的数量，检查是否与你postman上测试的一样

Element-plus显示不出图标icon

问题：在用vue开发网站的时候,往往图标是起着很重要的作用，但是在开发中发现无论是<el-button type="primary" icon="Edit" >编辑</el-button>的形式，还是直接import { Location, Setting, } from "@element-plus/icons-vue";然后使用<el-icon><location /></el-icon>的形式，都无法显示图标icon。

问题原因：element-plus的icon组件需要额外安装并且额外全局引入

解决方案：

1. 安装图标库：npm install @element-plus/icons
2. 引入并注册，在main.ts中引入并注册：

import * as EleIcons from '@element-plus/icons-vue'

for (const name in EleIcons){
	app.component(name,(EleIcons as any)[name])
}

目前完整的main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from './http'
import * as EleIcons from '@element-plus/icons-vue'


const app = createApp(App)
for (const name in EleIcons){
	app.component(name,(EleIcons as any)[name])
}
app.config.globalProperties.$axios = axios
app.use(ElementPlus)
app.use(store)
app.use(router)
app.mount('#app')

使用element-plus结合collapse实现点击按钮折叠或展开菜单

问题：element-plus给的例子是两个按钮，一个控制折叠一个控制展开。

解决方案：将collapse绑定一个值，然后设计一个按钮，点击触发菜单折叠与展开

<!-- 是否折叠菜单 -->
  <div class="toggle-button">
    <el-button @click="isCollapse = !isCollapse">||||</el-button>
  </div>

<el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    :router="true"
  >

data() {
    return {
      isCollapse: true,
    };
  },