Vue3+elementplus 项目中遇到的常见问题

1.跳转同一个路由的时候，只是参数不一样页面不刷新，不会执行onMounted

尝试多种方案，包括watch等

最终解决方案：router-view 设置 key 属性为路由的完整路径

<keep-alive>
　　<router-view :key="$route.fullPath"></router-view>
</keep-alive>

eg:左侧菜单是接口返回的  

默认看板（/main/bordList）

默认看板2（/main/bordList）

这种自己凭借参数/main/bordList?看板的id--eg:/main/bordList?123

 

2.接问题1，它返回的看板ID妈的超过10位，接口返回的是经过处理的会丢失精度的问题（参考：https://zhuanlan.zhihu.com/p/691668170）

npm i json-bigint
通过 Axios 请求得到的数据都是 Axios 处理（JSON.parse）之后的，我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。Axios 提供了自定义处理原始后端返回数据的 API：transformResponse 。

import axios from 'axios'

import jsonBig from 'json-bigint'

var json = '{ "value" : 9223372036854775807, "v2": 123 }'

console.log(jsonBig.parse(json))

const request = axios.create({
  baseURL: '你接口的基础路径', // 接口基础路径
  timeout: 30000,
  // transformResponse 允许自定义原始的响应数据（字符串）
  transformResponse: [function (data) {
    try {
      // 如果转换成功则返回转换的数据结果
      const json = jsonBig({
        storeAsString: true
      })
　　console.log("jsonBig.parse(data)", json.parse(data));
　　return json.parse(data)

    } catch (err) {
      // 如果转换失败，则包装为统一数据格式并返回
      return {
        data
      }
    }
  }]
})

export default request

 

3.el-menu 最后一个菜单自动显示未省略号的问题

:ellipsis="false"这个加上就行了

 

4.手写select（甲方爸爸要图标）

5.手写的select点击页面其他地方不关闭下拉选项框

6.watch写法

7.路由跳转传参写法

query传递参数不推荐 因为浏览器url上看得到

params也不行，这个需要在路由规则中提前声明参数名，参数名前不要丢失冒号（如果配置了参数必须传递，但是我这个目标页面可以通过点击事件跳转过去【要传参】，也可以菜单跳转过去【这里不用传参】，so不行），还有就是会失效，目标页面拿不到参数，会报警告【vuerouter 2022-08-22更新以后，就会有这个警告了】，无法传递参数，需要使用state替代,

直接上大招：

const goToCustomr = (row) => {
  // 隐藏参数 params有bug 传递过去获取不到参数 so 用state
  let state = {
    copyData: JSON.stringify(row),
    isCopy: "false",
  };
  // 跳转到自定义圈选页面
  router.push({
    path: "/main/customSelect/customSelect",
    state,
  });
};


目标页面获取参数:const name= history.state.copyData
搞定舒服啊

 

8.el-table表头 超长省略号，hover上去展示全部

.my_table :deep(.el-table .cell) {
          white-space: nowrap !important;
        }
        .my_table :deep(.el-table .cell:hover) {
          text-overflow: clip; /* hover时去掉省略号 */
          overflow: visible; /* hover时显示全部文本 */
          white-space: wrap !important;
        }

9.保存按钮在输入框内部，且输入框禁止拉伸，且输入框的文字不会再保存按钮的下面

 

　

   <div class="input-container">
      <el-input
        v-model="currentPageObj.inputValue"
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
        class="custom-input"
      >
      </el-input>

      <el-button class="vtn" type="primary">保存</el-button>
    </div>

 

.input-container {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--, #e7e7e7);
  background: #fff;
  position: relative;
  .custom-input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    :deep(.el-textarea__inner) {
      padding-right: 120px; /* 根据按钮宽度调整 */
      resize: none;//禁止拉伸
    }
  }
  /* 调整按钮位置使其垂直居中 */
  .vtn {
    width: 80px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--, #e7e7e7);
    background: #407af2;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}

 

 10.表单提交，不需要引入啥子JB其他东西直接表单的ref然后提交按钮直接来