Series Article Directory
【Vue3+Vite+Ts+element-plus】Using tsx to achieve infinite hierarchical packaging of the left column menu
foreword
When we use element-plus or element 's table , sometimes the UI effect given by the UI is as follows, but we searched the documentation of the component library and adjusted the style many times, and found that it is a common method when the left and right sidebars are fixed. is completely useless. Either there is no rounded corner on the left side or there is no rounded corner on the right side. The problem of rounded corners cannot be solved by ordinary methods. Next, I will divide it into two solutions, one is a normal form and the other is a fixed form on the left and right to solve this problem by means of pseudo-classes
1. The vue code is as follows
The custom-table class is defined here to facilitate the use of the scss code below
<el-table
class="custom-table"
....>
</el-table>
3. The scss code is as follows (normal form implementation effect does not use pseudo-classes)
//表格头部圆角
:deep(.el-table__header-wrapper) {
border-radius: 8px;
z-index: 100 !important;
overflow: hidden;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
//此代码是让每行左侧变圆
:deep(.el-table td:first-child) {
border-left: 1px solid #e2ecfa;
border-radius: 8px 0 0 8px;
padding: 2px;
z-index: 999;
background: #fff;
}
/此代码是让每行右侧变圆
:deep(.el-table td:last-child) {
border-right: 1px solid #e2ecfa;
border-radius: 0 8px 8px 0;
z-index: 999;
padding: 2px;
background: #fff;
}
3. The scss code is as follows (if your project has left and right fixed effects, please use this scheme)
The following is the code to implement the table form
//表格头部圆角
:deep(.el-table__header-wrapper) {
border-radius: 8px;
z-index: 100 !important;
overflow: hidden;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
//此代码是让每行左侧变圆
:deep(.el-table td:first-child) {
border-left: 1px solid #e2ecfa;
border-radius: 8px 0 0 8px;
padding: 2px;
z-index: 999;
background: #fff;
}
/此代码是让每行右侧变圆
:deep(.el-table td:last-child) {
border-right: 1px solid #e2ecfa;
border-radius: 0 8px 8px 0;
z-index: 999;
padding: 2px;
background: #fff;
}
.custom-table .el-table__fixed-left-wrapper,
.custom-table .el-table__fixed-right-wrapper {
overflow: visible;
}
.custom-table::before,
.custom-table::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 8px;
z-index: 1;
}
.custom-table::before {
left: 0;
background-color: #fff;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.custom-table::after {
right: 0;
background-color: #fff;
border-radius: 10px;
}
.control-table {
position: relative;
}