peng92055/smart-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复expand中多标签bug

Browse Source
This commit is contained in:
julyp
2020-04-29 17:27:38 +08:00
parent 2f75abad78
commit 250b404fae
1 changed files with 78 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
lib/index.scss
View File

@@ -9,6 +9,7 @@
border: 1px solid #ECF0F5;
border-right: none;
border-bottom: none;
&:after,
&:before {
content: "";
@@ -16,35 +17,43 @@
background-color: #ECF0F5;
z-index: 1;
}
&:before {
left: 0;
bottom: 0;
width: 100%;
height: 1px;
}
&:after {
top: 0;
right: 0;
width: 1px;
height: 100%;
}
table {
border-spacing: 0;
border: 0;
}
thead {
background: #F5F7FB;
font-size: 13px;
}
tr {
transition: background-color .25s ease;
}
tbody {
font-size: 12px;
tr[expand] {
td:first-child {
cursor: pointer;
:before {
&:before {
transition: 0.35s ease transform;
transform-origin: 25% 50%;
content: '';
@@ -57,10 +66,14 @@
margin: 5px 0 0 5px;
}
}
&[expanded]>td:first-child>:before {
transform: rotate(90deg);
&[expanded]>td:first-child {
&:before {
transform: rotate(90deg);
}
}
}
.expand-trigger {
display: inline-block;
transition: 0.35s ease transform;
@@ -72,13 +85,16 @@
border-color: transparent transparent transparent #c0c4cc;
margin-left: 5px;
}
.expand-cell>.stb_cell {
cursor: pointer;
&[open] {
.expand-trigger {
transform: rotate(90deg);
}
}
&[loading] {
.expand-trigger {
margin-left: 0;
@@ -94,12 +110,14 @@
}
}
}
&.stripe {
tr:nth-child(2n) {
background-color: #F9FBFF;
}
}
}
td,
th {
padding: 5px 0;
@@ -109,17 +127,21 @@
border-bottom: 1px solid #ECF0F5;
border-right: 1px solid #ECF0F5;
text-align: center;
&.is-hidden>* {
visibility: hidden;
}
}
th {
user-select: none;
overflow: hidden;
&[sort] {
&[sort]>.stb_cell {
cursor: pointer;
:before,
:after {
&:before,
&:after {
content: '';
float: right;
width: 0;
@@ -127,80 +149,99 @@
border-width: 5px;
border-style: solid;
}
:before {
&:before {
margin: 1px 0 0 -10px;
border-color: transparent transparent #c0c4cc transparent;
}
:after {
&:after {
margin: 12px 0 0 4px;
border-color: #c0c4cc transparent transparent transparent;
}
&.desc {
:after {
&:after {
border-top-color: #409eff;
}
}
&.asc {
:before {
&:before {
border-bottom-color: #409eff;
}
}
}
}
&.stb-cust-large {
thead {
font-size: 16px;
}
tbody {
font-size: 15px;
}
td,
th {
padding: 12px 0;
}
}
&.stb-cust-middle {
thead {
font-size: 15px;
}
tbody {
font-size: 14px;
}
td,
th {
padding: 10px 0;
}
}
&.stb-cust-left {
td,
th {
text-align: left;
}
}
&.stb-cust-right {
td,
th {
text-align: right;
}
}
th[align="left"],
td[align="left"] {
text-align: left;
}
th[align="center"],
td[align="center"] {
text-align: center;
}
th[align="right"],
td[align="right"] {
text-align: right;
}
th[nowrap],
td[nowrap] {
.stb_cell {
white-space: nowrap;
}
}
.std-checkbox_inner {
display: inline-block;
position: relative;
@@ -212,6 +253,7 @@
background-color: #fff;
z-index: 1;
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
&:after {
box-sizing: content-box;
content: "";
@@ -228,6 +270,7 @@
transform-origin: center;
}
}
.std-checkbox_input {
white-space: nowrap;
cursor: pointer;
@@ -237,6 +280,7 @@
position: relative;
vertical-align: middle;
}
.std-checkbox {
color: #606266;
font-weight: 500;
@@ -246,14 +290,17 @@
display: inline-block;
white-space: nowrap;
user-select: none;
&[checked]>.std-checkbox_input>.std-checkbox_inner {
background-color: #409eff;
border-color: #409eff;
&:after {
transform: rotate(45deg) scaleY(1);
}
}
}
.stb_cell {
overflow: hidden;
text-overflow: ellipsis;
@@ -262,11 +309,13 @@
padding: 0 4px;
line-height: 23px;
}
th>.stb_cell {
display: inline-block;
position: relative;
vertical-align: middle;
}
.stb_body,
.stb_footer,
.stb_header {
@@ -274,12 +323,15 @@
border-collapse: separate;
background: #fff;
}
.stb_header-wrapper {
overflow: hidden;
}
.stb_body-wrapper {
overflow: auto;
}
.stb_fixed,
.stb_fixed-right {
position: absolute;
@@ -289,11 +341,13 @@
overflow-y: hidden;
box-shadow: 0 -1px 8px rgba(0, 0, 0, .08);
}
.stb_fixed-right {
top: 0;
left: auto;
right: 0;
box-shadow: -1px 0 8px rgba(0, 0, 0, .08);
.stb_fixed-body-wrapper,
.stb_fixed-footer-wrapper,
.stb_fixed-header-wrapper {
@@ -301,18 +355,21 @@
right: 0;
}
}
.stb_fixed-right-patch {
position: absolute;
top: -1px;
right: 0;
background-color: #F5F7FB;
}
.stb_fixed-header-wrapper {
position: absolute;
left: 0;
top: 0;
z-index: 3;
}
.stb_fixed-body-wrapper {
position: absolute;
left: 0;
@@ -320,36 +377,44 @@
overflow: hidden;
z-index: 3;
}
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #e9edf4;
}
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
background-color: #919191;
}
* {
box-sizing: border-box;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);