mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
Table: add chalk theme (#7059)
* Table: add chalk theme * Table: add group header & other * Table: del package.lock * Table: del single test trace * Table: fix border problem * Table: fix boder problem * Table: clean css * Table: footer border right - -|
This commit is contained in:
Black Wayne
杨奕
parent
cb1d6bebe4
commit
1ba90b9534
@ -561,7 +561,6 @@ When there are too many rows, you can use a fixed header.
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
height="250"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
@ -629,7 +628,6 @@ When there are too many columns, you can fix some of them.
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
fixed
|
||||
@ -732,7 +730,6 @@ When you have huge chunks of data to put in a table, you can fix the header and
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="250">
|
||||
<el-table-column
|
||||
@ -839,7 +836,6 @@ When the the data is dynamically changed, you might want the table to have a max
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData4"
|
||||
border
|
||||
style="width: 100%"
|
||||
max-height="250">
|
||||
<el-table-column
|
||||
@ -964,7 +960,6 @@ When the data structure is complex, you can use group header to show the data hi
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
@ -1150,7 +1145,6 @@ You can also select multiple rows.
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData3"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
@ -1244,7 +1238,6 @@ Sort the data to find or compare data quickly.
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:default-sort = "{prop: 'date', order: 'descending'}"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
@ -1308,7 +1301,6 @@ Filter the table to find desired data.
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
@ -1390,7 +1382,6 @@ Customize table column so it can be integrated with other components.
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
label="Date"
|
||||
|
||||
@ -769,7 +769,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="250">
|
||||
<el-table-column
|
||||
@ -876,7 +875,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData4"
|
||||
border
|
||||
style="width: 100%"
|
||||
max-height="250">
|
||||
<el-table-column
|
||||
@ -1001,7 +999,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
@ -1187,7 +1184,6 @@
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData3"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
@ -1282,7 +1278,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:default-sort = "{prop: 'date', order: 'descending'}"
|
||||
>
|
||||
@ -1348,7 +1343,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
@ -1430,7 +1424,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
label="日期"
|
||||
|
||||
@ -53,7 +53,7 @@ export default {
|
||||
: ''
|
||||
}
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tbody class={ [{ 'has-gutter': this.hasGutter }] }>
|
||||
<tr>
|
||||
{
|
||||
this._l(this.columns, (column, cellIndex) =>
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
)
|
||||
}
|
||||
{
|
||||
!this.fixed && this.layout.gutterWidth
|
||||
this.hasGutter
|
||||
? <td class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></td>
|
||||
: ''
|
||||
}
|
||||
@ -121,6 +121,10 @@ export default {
|
||||
|
||||
columns() {
|
||||
return this.store.states.columns;
|
||||
},
|
||||
|
||||
hasGutter() {
|
||||
return !this.fixed && this.layout.gutterWidth;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -68,6 +68,9 @@ export default {
|
||||
render(h) {
|
||||
const originColumns = this.store.states.originColumns;
|
||||
const columnRows = convertToRows(originColumns, this.columns);
|
||||
// 是否拥有多级表头
|
||||
const isGroup = columnRows.length > 1;
|
||||
if (isGroup) this.$parent.isGroup = true;
|
||||
|
||||
return (
|
||||
<table
|
||||
@ -89,7 +92,7 @@ export default {
|
||||
: ''
|
||||
}
|
||||
</colgroup>
|
||||
<thead>
|
||||
<thead class={ [{ 'is-group': isGroup, 'has-gutter': this.hasGutter }] }>
|
||||
{
|
||||
this._l(columnRows, (columns, rowIndex) =>
|
||||
<tr>
|
||||
@ -112,8 +115,12 @@ export default {
|
||||
{
|
||||
column.sortable
|
||||
? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
|
||||
<i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }></i>
|
||||
<i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }></i>
|
||||
<span class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
|
||||
<i class="el-icon-sort-up"></i>
|
||||
</span>
|
||||
<span class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
|
||||
<i class="el-icon-sort-down"></i>
|
||||
</span>
|
||||
</span>
|
||||
: ''
|
||||
}
|
||||
@ -127,7 +134,7 @@ export default {
|
||||
)
|
||||
}
|
||||
{
|
||||
!this.fixed && this.layout.gutterWidth
|
||||
this.hasGutter
|
||||
? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
|
||||
: ''
|
||||
}
|
||||
@ -183,6 +190,10 @@ export default {
|
||||
|
||||
columns() {
|
||||
return this.store.states.columns;
|
||||
},
|
||||
|
||||
hasGutter() {
|
||||
return !this.fixed && this.layout.gutterWidth;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
:class="{
|
||||
'el-table--fit': fit,
|
||||
'el-table--striped': stripe,
|
||||
'el-table--border': border,
|
||||
'el-table--border': border || isGroup,
|
||||
'el-table--hidden': isHidden,
|
||||
'el-table--group': isGroup,
|
||||
'el-table--fluid-height': maxHeight,
|
||||
'el-table--enable-row-hover': !store.states.isComplex,
|
||||
'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
|
||||
@ -23,6 +24,7 @@
|
||||
<div
|
||||
class="el-table__body-wrapper"
|
||||
ref="bodyWrapper"
|
||||
:class="[`is-scroll-${scrollPosition}`]"
|
||||
:style="[bodyHeight]">
|
||||
<table-body
|
||||
:context="context"
|
||||
@ -63,7 +65,9 @@
|
||||
:layout="layout"
|
||||
:style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }"></table-header>
|
||||
</div>
|
||||
<div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper"
|
||||
<div
|
||||
class="el-table__fixed-body-wrapper"
|
||||
ref="fixedBodyWrapper"
|
||||
:style="[
|
||||
{ top: layout.headerHeight + 'px' },
|
||||
fixedBodyHeight
|
||||
@ -94,7 +98,7 @@
|
||||
v-if="rightFixedColumns.length > 0"
|
||||
:style="[
|
||||
{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' },
|
||||
{ right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 1)) + 'px' : '' },
|
||||
{ right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : '' },
|
||||
fixedHeight
|
||||
]">
|
||||
<div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
|
||||
@ -249,11 +253,21 @@
|
||||
bindEvents() {
|
||||
const { headerWrapper, footerWrapper } = this.$refs;
|
||||
const refs = this.$refs;
|
||||
let self = this;
|
||||
this.bodyWrapper.addEventListener('scroll', function() {
|
||||
if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
|
||||
if (footerWrapper) footerWrapper.scrollLeft = this.scrollLeft;
|
||||
if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
|
||||
if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
|
||||
const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
|
||||
const scrollLeft = this.scrollLeft;
|
||||
if (scrollLeft >= maxScrollLeftPosition) {
|
||||
self.scrollPosition = 'right';
|
||||
} else if (scrollLeft === 0) {
|
||||
self.scrollPosition = 'left';
|
||||
} else {
|
||||
self.scrollPosition = 'middle';
|
||||
}
|
||||
});
|
||||
|
||||
const scrollBodyWrapper = event => {
|
||||
@ -459,7 +473,10 @@
|
||||
layout,
|
||||
isHidden: false,
|
||||
renderExpanded: null,
|
||||
resizeProxyVisible: false
|
||||
resizeProxyVisible: false,
|
||||
// 是否拥有多级表头
|
||||
isGroup: false,
|
||||
scrollPosition: 'left'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -467,13 +467,14 @@ $--dialog-padding-primary: 15px;
|
||||
|
||||
/* Table
|
||||
-------------------------- */
|
||||
$--table-border-color: $--border-color-lighter;
|
||||
$--table-border: 1px solid $--border-color-lighter;
|
||||
$--table-text-color: $--color-text-regular;
|
||||
$--table-header-color: $--color-text-secondary;
|
||||
$--table-row-hover-background: $--background-color-base;
|
||||
$--table-current-row-background: $--background-color-base;
|
||||
$--table-current-row-background: $--color-primary-light-9;
|
||||
$--table-header-background: $--color-text-secondary;
|
||||
$--table-footer-background: $--color-text-placeholder;
|
||||
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
|
||||
|
||||
/* Pagination
|
||||
-------------------------- */
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -1,9 +1,9 @@
|
||||
@font-face {
|
||||
font-family: 'element-icons';
|
||||
src: url('fonts/element-icons.woff?t=1504667669908') format('woff'), /* chrome, firefox */
|
||||
url('fonts/element-icons.ttf?t=1504667669908') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
src: url('fonts/element-icons.woff?t=1505459769526') format('woff'), /* chrome, firefox */
|
||||
url('fonts/element-icons.ttf?t=1505459769526') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
[class^="el-icon-"], [class*=" el-icon-"] {
|
||||
@ -70,6 +70,8 @@
|
||||
.el-icon-error:before { content: "\e62c"; }
|
||||
.el-icon-success:before { content: "\e62d"; }
|
||||
.el-icon-warning:before { content: "\e62e"; }
|
||||
.el-icon-sort-down:before { content: "\e630"; }
|
||||
.el-icon-sort-up:before { content: "\e631"; }
|
||||
|
||||
.el-icon-loading {
|
||||
animation: rotating 1s linear infinite;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
-------------------------- */
|
||||
@mixin scroll-bar {
|
||||
$--scrollbar-thumb-background: #b4bccc;
|
||||
$--scrollbar-track-background: #edeff5;
|
||||
$--scrollbar-track-background: #fff;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
z-index: 11;
|
||||
@ -30,6 +30,7 @@
|
||||
|
||||
&-thumb {
|
||||
border-radius: 5px;
|
||||
width: 6px;
|
||||
background: $--scrollbar-thumb-background;
|
||||
}
|
||||
|
||||
@ -39,6 +40,11 @@
|
||||
|
||||
&-track {
|
||||
background: $--scrollbar-track-background;
|
||||
|
||||
&-piece {
|
||||
background: $--scrollbar-track-background;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
@include b(table-filter) {
|
||||
border: solid 1px $--color-black;
|
||||
border: solid 1px $--border-color-lighter;
|
||||
border-radius: 2px;
|
||||
background-color: $--color-white;
|
||||
box-shadow: $--dropdown-menu-box-shadow;
|
||||
@ -50,15 +50,15 @@
|
||||
}
|
||||
|
||||
@include e(bottom) {
|
||||
border-top: 1px solid $--color-black;
|
||||
border-top: 1px solid $--border-color-lighter;
|
||||
padding: 8px;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
cursor: pointer;
|
||||
font-size: $--font-size-base;
|
||||
font-size: $--font-size-small;
|
||||
padding: 0 3px;
|
||||
|
||||
&:hover {
|
||||
@ -70,7 +70,7 @@
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: $--color-black;
|
||||
color: $--disabled-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,37 +10,10 @@
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: $--color-white;
|
||||
border: 1px solid $--table-border-color;
|
||||
font-size: 14px;
|
||||
color: $--table-text-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $--table-border-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $--table-border-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.el-tooltip.cell {
|
||||
white-space: nowrap;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
// 数据为空
|
||||
@include e(empty-block) {
|
||||
position: relative;
|
||||
min-height: 60px;
|
||||
@ -57,6 +30,7 @@
|
||||
color: color($--color-primary s(16%) l(44%));
|
||||
}
|
||||
|
||||
// 展开行
|
||||
@include e(expand-column) {
|
||||
.cell {
|
||||
padding: 0;
|
||||
@ -86,12 +60,15 @@
|
||||
}
|
||||
|
||||
@include e(expanded-cell) {
|
||||
padding: 20px 50px;
|
||||
background-color: $--color-black;
|
||||
box-shadow: inset 0 2px 0 #f4f4f4;
|
||||
background-color: $--color-white;
|
||||
|
||||
// 纯属为了增加权重
|
||||
&[class*=cell] {
|
||||
padding: 20px 50px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-black !important;
|
||||
background-color: $--table-row-hover-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,18 +76,24 @@
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
& th.gutter, td.gutter {
|
||||
th.gutter, td.gutter {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
& th {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
thead {
|
||||
color: $--table-header-color;
|
||||
font-weight: 500;
|
||||
|
||||
&.is-group {
|
||||
th {
|
||||
background: $--background-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& th, td {
|
||||
height: 40px;
|
||||
th, td {
|
||||
padding: 12px 0;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
@ -128,19 +111,154 @@
|
||||
@include when(right) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.gutter {
|
||||
width: 15px;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
> * {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& th.is-leaf, td {
|
||||
border-bottom: 1px solid $--table-border-color;
|
||||
tr {
|
||||
background-color: $--color-white;
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th.is-leaf, td {
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> .cell {
|
||||
position: relative;
|
||||
word-wrap: normal;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.highlight {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.required > div::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff4d51;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.gutter {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
line-height: 23px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
&.el-tooltip {
|
||||
white-space: nowrap;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// 拥有多级表头
|
||||
@include m((group, border)) {
|
||||
border: $--table-border;
|
||||
|
||||
@include share-rule(border-pseudo) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $--border-color-lighter;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 表格右部伪 border
|
||||
&::after {
|
||||
@include extend-rule(border-pseudo);
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格底部伪 border，总是有的
|
||||
&::before {
|
||||
@include extend-rule(border-pseudo);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
// table--border
|
||||
@include m(border) {
|
||||
& th, td {
|
||||
border-right: 1px solid $--table-border-color;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
|
||||
th, td {
|
||||
border-right: $--table-border;
|
||||
}
|
||||
|
||||
.has-gutter {
|
||||
th:nth-last-of-type(2), td:nth-last-of-type(2) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
th.gutter:last-of-type {
|
||||
border-bottom: $--table-border;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
& th {
|
||||
border-bottom: 1px solid $--table-border-color;
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
}
|
||||
|
||||
@ -148,32 +266,12 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
& th {
|
||||
background-color: $--table-header-background;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& th > div {
|
||||
display: inline-block;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& td > div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include e((fixed, fixed-right)) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 1px 0 8px #d3d4d6;
|
||||
overflow-x: hidden;
|
||||
box-shadow: $--table-fixed-box-shadow;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@ -182,7 +280,7 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $--table-border-color;
|
||||
background-color: $--border-color-lighter;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
@ -191,8 +289,8 @@
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
background-color: $--table-header-background;
|
||||
border-bottom: 1px solid $--table-border-color;
|
||||
background-color: $--color-white;
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
|
||||
@include e(fixed-right) {
|
||||
@ -200,8 +298,6 @@
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
box-shadow: -1px 0 8px #d3d4d6;
|
||||
|
||||
.el-table__fixed-header-wrapper,
|
||||
.el-table__fixed-body-wrapper,
|
||||
.el-table__fixed-footer-wrapper {
|
||||
@ -215,11 +311,6 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
|
||||
& thead div {
|
||||
background-color: $--table-header-background;
|
||||
color: $--table-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(fixed-footer-wrapper) {
|
||||
@ -229,8 +320,8 @@
|
||||
z-index: 3;
|
||||
|
||||
& tbody td {
|
||||
border-top: 1px solid $--table-border-color;
|
||||
background-color: $--table-footer-background;
|
||||
border-top: $--table-border;
|
||||
background-color: $--table-row-hover-background;
|
||||
color: $--table-text-color;
|
||||
}
|
||||
}
|
||||
@ -250,7 +341,7 @@
|
||||
@include e(footer-wrapper) {
|
||||
margin-top: -1px;
|
||||
td {
|
||||
border-top: 1px solid $--table-border-color;
|
||||
border-top: $--table-border;
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,13 +352,8 @@
|
||||
@include e((header-wrapper, footer-wrapper)) {
|
||||
overflow: hidden;
|
||||
|
||||
& thead div {
|
||||
background-color: $--table-header-background;
|
||||
color: $--table-text-color;
|
||||
}
|
||||
|
||||
& tbody td {
|
||||
background-color: $--table-footer-background;
|
||||
background-color: $--table-row-hover-background;
|
||||
color: $--table-text-color;
|
||||
}
|
||||
}
|
||||
@ -275,115 +361,63 @@
|
||||
@include e(body-wrapper) {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& th.required > div::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff4d51;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@include when(scroll-left) {
|
||||
~ .el-table__fixed {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
& th > .cell {
|
||||
position: relative;
|
||||
word-wrap: normal;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include when(scroll-right) {
|
||||
~ .el-table__fixed-right {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
color: $--color-primary;
|
||||
.el-table--border {
|
||||
@include when(scroll-right) {
|
||||
~ .el-table__fixed-right {
|
||||
border-left: $--table-border;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(scroll-left) {
|
||||
~ .el-table__fixed {
|
||||
border-right: $--table-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .caret-wrapper {
|
||||
.caret-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 13px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
margin-top: -2px;
|
||||
width: 16px;
|
||||
height: 30px;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
& .sort-caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
z-index: 2;
|
||||
|
||||
&.ascending {
|
||||
top: 9px;
|
||||
border-top: none;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid $--color-black;
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
|
||||
&.descending {
|
||||
bottom: 9px;
|
||||
border-top: 5px solid $--color-black;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: none;
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& .ascending .sort-caret.ascending {
|
||||
border-bottom-color: $--color-black;
|
||||
}
|
||||
|
||||
& .descending .sort-caret.descending {
|
||||
border-top-color: $--color-black;
|
||||
}
|
||||
|
||||
& th.gutter, td.gutter {
|
||||
width: 15px;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& td.gutter {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
& td.is-hidden, th.is-hidden {
|
||||
> * {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& .cell {
|
||||
box-sizing: border-box;
|
||||
.sort-caret {
|
||||
color: $--icon-color-base;
|
||||
width: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
line-height: 24px;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
& tr input[type="checkbox"] {
|
||||
margin: 0;
|
||||
.ascending .sort-caret.ascending {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: $--color-white;
|
||||
.descending .sort-caret.descending {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
.hidden-columns {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include m(striped) {
|
||||
@ -391,11 +425,10 @@
|
||||
& tr.el-table__row--striped {
|
||||
td {
|
||||
background: #FAFAFA;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
&.current-row td {
|
||||
background: color($--color-primary tint(92%));
|
||||
background-color: $--table-current-row-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -406,14 +439,14 @@
|
||||
&, &.el-table__row--striped {
|
||||
&, &.current-row {
|
||||
> td {
|
||||
background-color: $--color-black;
|
||||
background-color: $--table-current-row-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.current-row > td {
|
||||
background: color($--color-primary tint(92%));
|
||||
background-color: $--table-current-row-background;
|
||||
}
|
||||
}
|
||||
|
||||
@ -423,24 +456,19 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
border-left: 1px solid $--table-border-color;
|
||||
border-left: $--table-border;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
& .hidden-columns {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include e(column-filter-trigger) {
|
||||
display: inline-block;
|
||||
line-height: 34px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
& i {
|
||||
color: $--color-black;
|
||||
color: $--color-info;
|
||||
font-size: 12px;
|
||||
transform: scale(.75);
|
||||
}
|
||||
}
|
||||
|
||||
@ -452,8 +480,7 @@
|
||||
|
||||
@include m(enable-row-hover) {
|
||||
.el-table__body tr:hover > td {
|
||||
background-color: $--color-black;
|
||||
background-clip: padding-box;
|
||||
background-color: $--table-row-hover-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user