innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

fix: table表头字体加粗、固定表头border粗问题、过滤列弹出框宽度自适应超出8个字显示省略号、表头下增加border下划线

This commit is contained in:
izbz wh 2019-04-03 11:14:39 +08:00
parent 642a02d0e4
commit 3a6c718b42
5 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
dist/demo.css vendored
View File

@ -19,7 +19,7 @@
border-collapse: collapse;
text-align: left; }
.u-table th {
font-weight: normal;
font-weight: bold;
text-align: left; }
.u-table th[colspan] {
text-align: center; }
@ -33,6 +33,8 @@
color: #1565c0; }
.u-table td a:active {
color: #1565c0; }
.u-table thead tr:last-child {
border-bottom: 1px solid #C1C7D0; }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr tr a {
@ -48,8 +50,8 @@
padding: 12px 8px;
word-break: break-all; }
.u-table tr.filterable th {
padding-top: 4px;
padding-bottom: 4px; }
padding-top: 5px !important;
padding-bottom: 5px !important; }
.u-table tr.filterable th .filterContext {
height: 35px; }
.u-table-row-hover {
@ -60,6 +62,10 @@
border: 1px solid rgb(193, 199, 208);
box-sizing: border-box;
table-layout: fixed; }
.u-table-bordered .u-table-header > table {
border-bottom: 0; }
.u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {
border-top: 0px; }
.u-table-bordered th {
border-bottom: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
@ -283,6 +289,7 @@
overflow-y: scroll;
color: #212121; }
.u-table-filter-column-clear-setting {
cursor: pointer;
margin-bottom: 4px; }
.u-table-filter-column-cont {
position: relative; }
@ -306,7 +313,9 @@
margin: 0px; }
.u-table-filter-column-pop-cont-item > span {
margin-left: -3px;
width: 132px;
max-width: 132px;
width: auto !important;
min-width: 56px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -511,11 +520,17 @@
.u-filter-dropdown-menu-wrap {
z-index: 1800; }
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
line-height: 32px;
height: 32px;
line-height: 28px;
height: 28px;
padding: 0px 16px 0 16px;
cursor: pointer; }
.filter-wrap .u-form-control {
height: 28px; }
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
height: 28px; }
.u-row-hover {
position: absolute;
right: 24px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

43
src/Table.scss
View File

@ -16,6 +16,9 @@ $horizontal-padding: 8px;
$table-hover-color: #E7F2FC;
$table-move-in-color: $bg-color-base;
$checkbox-height:16px;
$table-th-bottom-border:#C1C7D0;
$filter-form-control-height:28px;
.u-table {
font-size: $font-size-base;
color: $text-color;
@ -44,7 +47,7 @@ $checkbox-height:16px;
th {
// background: $table-head-background-color;
font-weight: normal;
font-weight: bold;
text-align: left;
// transition: background 0.3s ease;
&[colspan] {
@ -67,7 +70,12 @@ $checkbox-height:16px;
}
}
}
thead{
tr:last-child{
border-bottom: 1px solid $table-th-bottom-border;
}
}
tr {
// transition: all 0.3s ease;
&:hover {
@ -101,8 +109,8 @@ $checkbox-height:16px;
&.filterable{
th{
padding-top: 4px;
padding-bottom: 4px;
padding-top: 5px !important;
padding-bottom: 5px !important;
.filterContext{
height: 35px;
}
@ -123,6 +131,16 @@ $checkbox-height:16px;
table-layout: fixed;
// width:auto;
}
.u-table-header>table {
border-bottom: 0;
}
.u-table-header~.u-table-body,.u-table-header~.u-table-body-outer{
table{
border-top: 0px ;
}
}
th {
border-bottom: 1px solid $table-border-color;
box-sizing: border-box;
@ -477,7 +495,7 @@ $checkbox-height:16px;
}
&-clear-setting{
// border-bottom: 1px solid #ccc;
// cursor: pointer;
cursor: pointer;
margin-bottom: 4px;
}
&-cont{
@ -509,7 +527,9 @@ $checkbox-height:16px;
}
&-pop-cont-item>span{
margin-left: -3px;
width: 132px;
max-width: 132px;
width: auto !important;
min-width: 56px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -784,14 +804,21 @@ $checkbox-height:16px;
z-index: 1800;
.u-dropdown-menu {
li.u-dropdown-menu-item {
line-height: 32px;
height: 32px;
line-height: $filter-form-control-height;
height: $filter-form-control-height;
padding: 0px 16px 0 16px;
cursor: pointer;
}
}
}
.filter-wrap {
.u-form-control{
height: $filter-form-control-height;
}
.u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
height: $filter-form-control-height;
}
}
.u-row-hover{
position: absolute;
right: 24px;