vue-easytable
Version:
538 lines (485 loc) • 20.7 kB
text/less
@ve-virtual-phantom-index: -1;
@ve-normal-cell-selection-border-index: 0;
@ve-normal-cell-selection-corner-index: 1;
@ve-column-resizer-handler-index: 50;
@ve-column-resizer-line-index: 50;
.ve-table *,
.ve-table *:before,
.ve-table *:after {
box-sizing: border-box;
// margin: 0;
// padding: 0;
}
.ve-table {
position: relative;
overflow: hidden;
// table container
.ve-table-container {
position: relative;
overflow-y: auto;
height: 100%;
width: 100%;
// 修复嵌套表格外层开启单元格选择，子表格未开启单元格选择，导致默认文字无法选中的问题
user-select: text;
// table content wrapper
.ve-table-content-wrapper {
position: relative;
left: 0;
right: 0;
top: 0;
// table content
table.ve-table-content {
min-width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
// 表头（需要处理多表头情况）
thead.ve-table-header {
tr.ve-table-header-tr {
height: @ve-table-head-row-height;
th.ve-table-header-th {
background-color: @ve-table-header-background-color;
padding: @ve-table-head-row-td-padding;
font-weight: 500;
color: @ve-table-head-text-color;
font-size: @ve-table-head-text-font-size;
// cell indicator
&.ve-table-cell-indicator {
background-color: @ve-table-header-cell-indicator-background-color;
}
// cell indicator active
&.ve-table-cell-indicator-active {
background-color: @ve-table-header-cell-indicator-active-background-color;
color: @ve-table-head-indicator-active-text-color;
}
}
}
// 固定头
&.ve-table-fixed-header {
tr th {
position: sticky;
z-index: @ve-fixed-header-index;
}
}
.ve-table-header-tr {
.ve-table-header-th {
// 固定左列、右列
&.ve-table-fixed-left,
&.ve-table-fixed-right {
position: sticky;
z-index: @ve-fixed-header-cell-index;
}
// checkbox
.ve-table-checkbox-wrapper {
width: 25px;
}
// sort
.ve-table-sort {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin-left: 5px;
color: @ve-table-sort-icon-default-color;
pointer-events: none;
.ve-table-sort-icon {
position: absolute;
display: block;
font-size: 14px;
&.ve-table-sort-icon-top {
top: 1px;
}
&.ve-table-sort-icon-bottom {
top: 9px;
}
&.active {
color: @ve-table-sort-icon-active-color;
}
}
}
&.ve-table-sortable-column {
cursor: pointer;
}
/* filter */
.ve-table-filter {
display: inline-block;
position: relative;
width: 0;
height: 16px;
cursor: pointer;
.ve-table-filter-icon {
color: @ve-table-header-filter-icon-color;
position: absolute;
top: 0;
left: 5px;
}
}
}
}
}
// tbody
tbody.ve-table-body {
tr.ve-table-body-tr,
tr.ve-table-expand-tr {
height: @ve-table-body-row-height;
td.ve-table-body-td,
td.ve-table-expand-td {
background-color: @ve-table-body-background-color;
color: @ve-table-body-text-color;
// hack content fill td height
//height: 1px;
height: inherit;
font-size: @ve-table-body-text-font-size;
// 解决展开表格偶发抖动的问题
overflow: hidden;
}
td.ve-table-body-td {
padding: @ve-table-body-row-td-padding;
white-space: pre-wrap;
overflow: hidden;
}
td.ve-table-operation-col {
background-color: @ve-table-td-operation-column-background-color;
// cell indicator
&.ve-table-cell-indicator {
background-color: @ve-table-body-cell-indicator-background-color;
}
// cell indicator active
&.ve-table-cell-indicator-active {
background-color: @ve-table-body-cell-indicator-active-background-color;
color: @ve-table-body-indicator-active-text-color;
}
}
}
// 展开行
tr.ve-table-expand-tr {
display: table-row;
}
// 滚动中效果
tr.ve-table-body-row-scrolling {
& > td {
background-color: @ve-table-body-row-row-scrolling-background-color;
}
}
// 斑马纹
&.ve-table-stripe {
tr.ve-table-body-tr:nth-child(2n + 1) td {
background-color: @ve-table-body-row-stripe-background-color;
}
}
// 行悬浮效果
&.ve-table-row-hover {
tr.ve-table-body-tr:hover td {
background-color: @ve-table-body-row-hover-background-color;
}
}
// 行点击高亮
&.ve-table-row-highlight {
tr.ve-table-body-tr {
&.ve-table-tr-highlight {
td {
background-color: @ve-table-body-row-highlight-background-color;
}
}
}
}
.ve-table-body-tr {
.ve-table-body-td {
// 固定左列、右列
&.ve-table-fixed-left,
&.ve-table-fixed-right {
position: sticky;
z-index: @ve-fixed-body-cell-index;
}
// expand row icon
.ve-table-row-expand-icon {
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
i {
display: inline-flex;
&::before {
transform: rotate(0deg);
transition: transform 0.3s;
}
}
&.ve-table-expand-icon-collapsed {
i::before {
transform: rotate(90deg);
transition: transform 0.3s;
}
}
}
// checkbox
.ve-table-checkbox-wrapper {
width: 25px;
}
// ellipsis
.ve-table-body-td-span-ellipsis {
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
/* -webkit-line-clamp: 1; */
-webkit-box-orient: vertical;
}
}
}
// expand row
.ve-table-expand-tr {
.ve-table-expand-td-content {
position: sticky;
z-index: @ve-fixed-body-cell-index;
left: 0px;
padding: @ve-table-body-row-expand-content-padding;
}
}
}
// tfooter
tfoot.ve-table-footer {
tr.ve-table-footer-tr {
height: @ve-table-foot-row-height;
td.ve-table-footer-td {
background-color: @ve-table-foot-background-color;
color: @ve-table-foot-text-color;
padding: @ve-table-foot-row-td-padding;
font-size: @ve-table-foot-text-font-size;
}
}
// 固定footer
&.ve-table-fixed-footer {
tr td {
position: sticky;
z-index: @ve-fixed-foot-index;
}
}
.ve-table-footer-tr {
.ve-table-footer-td {
// 固定左列、右列
&.ve-table-fixed-left,
&.ve-table-fixed-right {
position: sticky;
z-index: @ve-fixed-foot-cell-index;
}
}
}
}
}
// cell selection
.ve-table-selection-wrapper {
.ve-table-selection-fixed-left {
.ve-table-selection-current,
.ve-table-selection-normal-area,
.ve-table-selection-autofill-area {
.ve-table-selection-corner {
position: absolute;
z-index: @ve-fixed-cell-selection-corner-index;
}
.ve-table-selection-border {
position: absolute;
z-index: @ve-fixed-cell-selection-border-index;
}
}
.ve-table-selection-normal-area-layer {
position: absolute;
z-index: @ve-fixed-cell-selection-border-index;
}
}
.ve-table-selection-middle {
.ve-table-selection-current,
.ve-table-selection-normal-area,
.ve-table-selection-autofill-area {
.ve-table-selection-corner {
position: absolute;
z-index: @ve-normal-cell-selection-corner-index;
}
.ve-table-selection-border {
position: absolute;
z-index: @ve-normal-cell-selection-border-index;
}
}
.ve-table-selection-normal-area-layer {
position: absolute;
z-index: @ve-normal-cell-selection-border-index;
}
}
.ve-table-selection-fixed-right {
.ve-table-selection-current,
.ve-table-selection-normal-area,
.ve-table-selection-autofill-area {
.ve-table-selection-corner {
position: absolute;
z-index: @ve-fixed-cell-selection-corner-index;
}
.ve-table-selection-border {
position: absolute;
z-index: @ve-fixed-cell-selection-border-index;
}
}
.ve-table-selection-normal-area-layer {
position: absolute;
z-index: @ve-fixed-cell-selection-border-index;
}
}
// 浮层
.ve-table-selection-normal-area-layer {
background-color: @ve-table-selection-area-layer-background-color;
opacity: 0.1;
pointer-events: none;
}
.ve-table-selection-current,
.ve-table-selection-normal-area {
.ve-table-selection-corner {
display: block;
height: 8px;
width: 8px;
border-style: solid;
border-color: @ve-table-selection-corner-border-color;
background-color: @ve-table-selection-corner-background-color;
cursor: crosshair;
}
.ve-table-selection-border {
display: block;
background-color: @ve-table-selection-border-color;
}
}
.ve-table-selection-autofill-area {
.ve-table-selection-border {
display: block;
background-color: @ve-table-selection-autofill-border-color;
}
}
.ve-table-selection-border {
pointer-events: none;
}
}
}
// virtual scroll phantom
.ve-table-virtual-phantom {
&.ve-table-virtual-scroll {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: @ve-virtual-phantom-index;
}
}
// column fix effect
&.ve-table-container-left-scrolling {
.ve-table-last-left-fixed-column {
border-right-color: @ve-table-column-fixed-border-color;
}
}
&.ve-table-container-right-scrolling {
.ve-table-first-right-fixed-column {
border-left: 1px solid @ve-table-column-fixed-border-color;
}
}
// autofilling
&.ve-table-autofilling {
cursor: crosshair;
}
// enable cell selection
&.ve-table-enable-cell-selection {
user-select: none;
}
// border x
.ve-table-border-x {
th,
td {
border-bottom: 1px solid @ve-table-border-color;
}
tr:first-child > th,
// footer
tr.ve-table-footer-tr:first-child > td {
border-top: 1px solid @ve-table-border-color;
}
}
// border y
.ve-table-border-y {
th,
td {
border-right: 1px solid @ve-table-border-color;
}
th:first-child,
td:first-child {
border-left: 1px solid @ve-table-border-color;
}
}
}
// border around
&.ve-table-border-around {
border: 1px solid @ve-table-border-color;
.ve-table-container {
table.ve-table-content {
&.ve-table-border-x {
tr:last-child > td {
border-bottom: 0px;
}
tr:first-child > th {
border-top: 0px;
}
}
&.ve-table-border-y {
th.ve-table-last-column,
td:last-child {
border-right: 0px;
}
th:first-child,
td:first-child {
border-left: 0px;
}
}
}
}
}
// edit input
.ve-table-edit-input-container {
position: absolute;
right: auto;
.ve-table-edit-input {
resize: none;
overflow-y: visible;
border: none;
outline-width: 0;
margin: 0;
padding: 1px 5px 0;
font-family: inherit;
line-height: @ve-table-td-editing-line-height;
font-size: inherit;
border: 2px solid @ve-table-td-editing-border-color;
box-shadow: 1px 2px 5px 0 @ve-table-td-editing-box-shadow-color;
display: block;
color: @ve-table-td-editing-font-color;
border-radius: 0;
background-color: @ve-table-td-editing-background-color;
}
}
// column resizer
.ve-table-column-resizer {
&-handler {
position: absolute;
cursor: col-resize;
// left: 0;
top: 0;
bottom: 0;
width: 5px;
height: 40px;
z-index: @ve-column-resizer-handler-index;
&.active {
background-color: @ve-table-column-resizer-handler-background-color;
}
}
&-line {
position: absolute;
pointer-events: none;
// left: 0;
top: 0;
bottom: 0;
width: 0;
border-left: 1px solid
@ve-table-column-resizer-line-background-color;
z-index: @ve-column-resizer-line-index;
}
}
}