2021.7.29

坑19（css、el-menu、目录、样式）：配置完目录el-menu后，发现其中文字内容均为居中展示，而element-plus官网文档效果是左对齐的。发现原因：包裹目录的组件中设置了text-align: center，改为left即可实现目标效果。但这也会影响到其他各组件的效果。参考： element ui 导航怎么让菜单对齐啊-CSDN论坛

坑20（css、el-menu、目录、样式）：设置目录el-menu自定义颜色（深色）后，与左侧整体相比，宽度在右侧少1px（视觉+元素选择）。原因排查：el-menu自带1px的border-right。在style中如下设置即可消除。

<style>

.el-menu{

    border-right: none!important;

}

</style>

坑21（css、el-tabs、标签页、样式）：设置目录el-tabs发现其下方空白较大（视觉+元素选择）各标签高度为41px，但el-tabs总体高度为56px。在style中如下设置即可消除el-tabs下方空白。另：此处标签页下方未放入内容，仅是作为一个页头效果，故而可以缩小其高度而不影响使用。

<style>

.el-tabs {

    height: 41px!important;

    overflow: hidden!important;

}

</style>

坑22（vue3、el-menu、生命周期钩子、导航守卫、页面刷新）：发现修改、关闭标签页（改变路由）时，左侧设置的el-menu并不会动态的跟随页面路径变化而变化。目标：el-menu目录的被选中项跟随路由变化而变化。解决方案：在router.afterEach()和onMounted()中调用目录更新函数updateAsideMenu()，将el-menu的default-active属性值设置为当前路由的path（此处el-menu启用router模式，el-menu-item的index值即为对应的路由path）。故修改script如下：

<script>

import { onMounted,reactive,toRefs } from 'vue'

import { useRouter } from 'vue-router'



export default {

    name:'AsideMenu',

    setup() {

        const router=useRouter()

        const state=reactive({

            activeMenuItemIndex:'',

        })



        function updateAsideMenu(){

            console.log(router.currentRoute.value)

            state.activeMenuItemIndex=router.currentRoute.value.path

        }



        router.afterEach((to,from)=>{

            console.log('router.afterEach')

            console.log('to: ',to,'from: ',from)

            updateAsideMenu()

        })



        onMounted(()=>{

            console.log('onMounted')

            updateAsideMenu()

        })



        return {

            ...toRefs(state)

        }

        

    },

}

</script>

而在template中，设置el-menu组件的default-active属性：

<template>

...

    <el-menu

    :default-active="activeMenuItemIndex"

    router>

    ...

    </el-menu>

...

</template>

坑23（element-plus、el-form、el-input、回车提交）：期望效果是回车即可提交el-form表格内容，即达到和点击提交按钮相同的效果。此时el-form组件中有两个el-input和一个el-button。解决方法：在希望触发回车提交效果的el-input中添加属性@keyup.enter='submitForm'，submitForm()即为提交表格事件。

by 莫得感情踩坑机(限定)