Vue+ElementPlus的一些问题修复汇总

目录

一、ElementPlus+Vue-router做侧边栏问题

[二、 组件样式问题](#二、 组件样式问题)

2.1修改文字颜色、大小、粗细、边框的颜色

2.2修改聚焦后文字的颜色、边框的颜色

2.3修改鼠标悬浮时文字的颜色、边框的颜色

[三、 组件样式问题](#三、 组件样式问题)

3.1修改文字颜色、大小、粗细

[四、 样式问题](#四、 样式问题)

4.1当数据为空时的提示词

4.2修改列表标题样式

一、ElementPlus+Vue-router做侧边栏问题

在使用ElementPlus 中的**<el-menu>**组件做侧边栏时，鼠标点击某个选项后，跳转到新的页面，同时对应的侧边栏应该高亮显示，如下图所示：

点击"测试1 "后，"测试1 "高亮变蓝色，同时控制router 跳转新的页面，具体区域由下图绿色区域所示：

但是由于**<el-menu>** 依靠index 来确定当前选定的标签，因此当我们"刷新、返回\前进一页"时，会出现高亮标签 变成你所设置的default-active标签

这个时候我们需要根据URL的变化，来重置选中标签

具体思路：

1. router 配置中，每一个路由除指定path 外，还要指定name
2. <el-menu-item> 中的index 应是需要跳转到页面的路由name
3. 使用onMounted()，当组件被挂载时(页面刷新 )，检测当前URL，确定被选中的标签实现高亮
4. 使用watch()监测URL 的变化，当URL发生变化时(前进/后退)，确定被选中的标签实现高亮

router.js配置：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: "/",
        redirect:{
            name: "page1"
        }
    },
    {
        path: "/page1",
        name: "page1",
    },
    {
        path: "/page2",
        name: "page2",
    },
    {
        path: "/page3",
        name: "page3",
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

App.vue配置：

<script setup>
import { ref,onMounted,watch } from 'vue'
import { useRouter,useRoute } from 'vue-router'

//创建选中菜单索引
const activeIndex = ref('page1')
//创建路由对象
const router = useRouter()
//创建路由参数对象
const route = useRoute()

//监听路由变化
watch(() => route.path,(newPath) => {
    activeIndex.value = newPath.split('/')[1]
    console.log(activeIndex.value)
})

// 页面加载完成后，设置选中菜单索引
onMounted(() => {
    activeIndex.value = route.path.split('/')[1]
})

// 菜单点击事件
function handleSelect(index) {
    router.push({
        name: index
    })
}
</script>

<template>
    <el-container>
        <el-aside style="padding: 0px;width: auto;">
            <el-menu :default-active="activeIndex" @select="handleSelect" class="init" mode="vertical" >
                <el-menu-item index="page1">测试1</el-menu-item>
                <el-menu-item index="page2">测试2</el-menu-item>
                <el-menu-item index="page3">测试3</el-menu-item>
            </el-menu>
        </el-aside>
        <el-main style="padding: 0px;">
            <div class="test-div">
                <router-view></router-view>
            </div>
        </el-main>
    </el-container>
</template>

<style scoped>
    .init {
        width: 200px;
        height: 100vh;
    }
    .test-div {
        height: 100vh;
        background-color: aquamarine;
    }
</style>

缺点：

1. route 路由的path 与name必须一致
2. 当参数结构复杂，存在多个定界符"/"时，对应的split索引也会改变

另一种解决思路：

使用Vuex 存储当前选中页面的索引，可以完美解决上述缺点

二、<el-input>组件样式问题

使用ElementPlus 最大的好处就是方便，最大的坏处就是想要定制化就比较麻烦

因为封装的问题，所以修改样式一直是一件麻烦的事情

注意：以下所有样式均是在**<style scoped>**局部作用域中实现，而在全局作用域中实现不具备唯一性，故不实现

同时，所有实现基于Vue3语法

2.1修改文字颜色、大小、粗细、边框的颜色

:deep(.el-input__inner){
    color:red;
    font-size: 20px;
    font-weight: bold;
}
/* 边框颜色其实是box-shadow实现的 */
:deep(.el-input__wrapper){
    box-shadow: 0 0 0 1px red inset;
}

效果：

2.2修改聚焦后文字的颜色、边框的颜色

:deep(.el-input__inner:focus){
    color: blue;
}
/* 边框颜色其实是box-shadow实现的 */
:deep(.el-input__wrapper.is-focus){
    box-shadow: 0 0 0 1px green inset;
}

效果：

2.3修改鼠标悬浮时文字的颜色、边框的颜色

:deep(.el-input__inner:hover){
    color: green;
}
:deep(.el-input__wrapper:hover){
    box-shadow: 0 0 0 1px blue inset;
}

效果：

三、<el-menu>组件样式问题

注意：以下所有样式均是在**<style scoped>**局部作用域中实现，而在全局作用域中实现不具备唯一性，故不实现

同时，所有实现基于Vue3语法

3.1修改文字颜色、大小、粗细

/* 修改默认样式 */
.el-menu-item {
    color:red;
    font-size: 20px;
    font-weight: bold;
    background-color: black;  
}
/* 修改悬浮时样式 */
.el-menu-item:hover {
    color: white;
    background-color: cadetblue;
}
/* 修改选中时样式 */
.el-menu-item.is-active {
    color: green;
    background-color: red;
}

效果：

四、<el-table>样式问题

注意：以下所有样式均是在**<style scoped>**局部作用域中实现，而在全局作用域中实现不具备唯一性，故不实现

同时，所有实现基于Vue3语法

4.1当数据为空时的提示词

在默认情况下，如果数据为空，<el-table> 会默认渲染："No Data"提示词，用来表示没有数据。

但如果想要修改这个提示词，可以使用官方提供的"empty-text"属性修改：

<el-table empty-text="暂无数据">
    <el-table-column label="测试1"></el-table-column>
    <el-table-column label="测试2"></el-table-column>
    <el-table-column label="测试3"></el-table-column>
    <el-table-column label="测试4"></el-table-column>
</el-table>

效果：

4.2修改列表标题样式

/* 修改标题头文字样式 */
:deep(.el-table__header thead) {
    color: black;
    font-size: 20px;
    font-weight: bold;
}
/* 修改标题文字水平居中 */
:deep(thead .cell) {
    text-align: center;
}

效果：