vue3 el-table 如何通过深度选择器::v-deep修改组件内部样式(默

彼德赵

默认的样式：

修改的样式：

CSS：

1.   // 使用vue3的深度选择器 ::v-deep（或者 :deep，::v-deep的别名），修改组件内部样式，从而改变组 件默认的显示效果
   
2.   // 表格奇数行样式
   
3.   ::v-deep .el-table .odd-row {
   
4.     background-color: #ccffff;
   
5.   }
   
6.   // 表格偶数行样式
   
7.   :deep .el-table .even-row {
   
8.     background-color: #9acdd6;
   
9.   }
   
10.   // 表格单元格样式
    
11.   ::v-deep .el-table .el-table__cell {
    
12.     // 行高（行空间）
    
13.     padding: 2px 0; // 默认值：padding: 8px 0;
    
14.   }
    
15.   // 表格(.el-table)、表格表头单元格(.el-table th)、表格表体单元格(.el-table td)样式，.el-table__cell相当于.el-table th和.el-table td
    
16.   ::v-deep .el-table,
    
17.   // ::v-deep .el-table th,
    
18.   // ::v-deep .el-table td {
    
19.   ::v-deep .el-table .el-table__cell {
    
20.     // 边框
    
21.     border: 1px solid #007ACC;
    
22.   }
    
23.   // 表格表头样式
    
24.   :deep .el-table thead {
    
25.     color: blue;
    
26.     font-size: 14px;
    
27.   }
    
28.   // 表格表头单元格样式
    
29.   ::v-deep .el-table th {
    
30.     background-color: skyblue;
    
31.   }
    
32.   // 表格表体样式
    
33.   ::v-deep .el-table tbody {
    
34.     color: black;
    
35.     font-size: 14px;
    
36.   }
    
37.   // 表格行样式
    
38.   :deep .el-table tr {
    
39.     background-color: pink;
    
40.   }
    
41.   // 表格单元格样式，与 表格奇偶行背景颜色有冲突
    
42.   // :deep .el-table td {
    
43.   //   background-color: hsl(240, 50%, 80%);
    
44.   // }
    
45.   // 表格当前选择行样式，与 表格行样式（:deep .el-table tr）有冲突
    
46.   ::v-deep .el-table__body tr.current-row > td {
    
47.     background-color: hsla(240, 100%, 50%, 0.2);
    
48.   }
    
49.   // 表格无数据时的背景样式
    
50.   ::v-deep .el-table__empty-block {
    
51.     background-color: skyblue;
    
52.   }
    
53.   // 表格无数据时的字体样式
    
54.   :deep .el-table__empty-text {
    
55.     color: red;
    
56.     font-size: 18px;
    
57.   }

复制代码

到此这篇关于vue3 el-table 通过深度选择器::v-deep修改组件内部样式（默认样式）的文章就介绍到这了,更多相关vue3 el-table 修改组件内部样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/328888enm.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！