目录
一、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的变化，来重置选中标签
具体思路：
- router配置中，每一个路由除指定path外，还要指定name
- <el-menu-item>中的index应是需要跳转到页面的路由name
- 使用onMounted()，当组件被挂载时(页面刷新)，检测当前URL，确定被选中的标签实现高亮
- 使用watch()监测URL的变化，当URL发生变化时(前进/后退)，确定被选中的标签实现高亮
router.js配置：
javascript">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配置：
javascript"><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>缺点：
- route路由的path与name必须一致
- 当参数结构复杂，存在多个定界符“/”时，对应的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;
}效果：
