From 6a02374cfd482077979b3c06d1cb25f89492bafc Mon Sep 17 00:00:00 2001 From: JiwenBai Date: Sun, 29 Sep 2019 13:56:27 +0800 Subject: [PATCH] feat(advance-table): add col border in light theme --- .../advanceTableDemos/basicUsage.demo.vue | 2 +- packages/common/AdvanceTable/src/main.vue | 18 ++++- packages/common/Table/src/main.vue | 2 +- styles/AdvancedTable.scss | 66 +++++++++++-------- styles/Table.scss | 31 ++++++--- styles/themes/dark/components/Table.scss | 2 + styles/themes/light/components/Table.scss | 1 + 7 files changed, 82 insertions(+), 40 deletions(-) diff --git a/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue b/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue index 1f130678f..399a8c3a9 100644 --- a/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue +++ b/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue @@ -79,7 +79,7 @@ const _columns3 = ($this) => { title: 'Name', key: 'name', sortable: true, - width: 400 + width: 300 }, { title: 'Age', diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue index 78f99073e..b3c10760a 100644 --- a/packages/common/AdvanceTable/src/main.vue +++ b/packages/common/AdvanceTable/src/main.vue @@ -3,7 +3,8 @@ ref="tableWrapper" class="n-advance-table__wrapper n-advance-table" :class="{ - [`n-${synthesizedTheme}-theme`]: synthesizedTheme + [`n-${synthesizedTheme}-theme`]: synthesizedTheme, + 'n-advance-table--col-border':colBorder }" >
@@ -279,6 +280,10 @@ export default { loading: { type: [Boolean], default: false + }, + colBorder: { + type: Boolean, + default: true } }, data () { @@ -426,6 +431,7 @@ export default { this.searchDataNoSort = null this.checkBoxes = [] this.currentPageAllSelect = false + this.computeScollBar() }, currentSearchColumn () { this.searchData = this.computeShowingData() @@ -480,7 +486,7 @@ export default { this.wrapper = this.$refs.tableWrapper this.wrapperWidth = this.$refs.tableWrapper.offsetWidth this.tbodyWidth = this.relTable.offsetWidth - this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth + this.headerRealEl = this.$refs.header.$el.querySelector('thead') // console.log(this.wrapperWidth, this.tbodyWidth) @@ -609,6 +615,13 @@ export default { event.stopPropagation() }, + computeScollBar () { + this.$nextTick(() => { + this.tbodyWidth = this.relTable.offsetWidth + this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth + console.log('TCL: mounted -> this.scrollBarWidth', this.wrapperWidth, this.tbodyWidth) + }) + }, computeCustomWidthStl (column) { if (column.width) { let width = column.width @@ -645,6 +658,7 @@ export default { init () { this.$nextTick(() => { this.wrapperWidth = this.$refs.tableWrapper.offsetWidth + this.computeScollBar() // console.log(this.relTable.offsetWidth) diff --git a/packages/common/Table/src/main.vue b/packages/common/Table/src/main.vue index e812b7d3d..2f446da71 100644 --- a/packages/common/Table/src/main.vue +++ b/packages/common/Table/src/main.vue @@ -6,7 +6,7 @@ [`n-${synthesizedTheme}-theme`]: synthesizedTheme }" > - +
default table content
diff --git a/styles/AdvancedTable.scss b/styles/AdvancedTable.scss index de77e255d..918705180 100644 --- a/styles/AdvancedTable.scss +++ b/styles/AdvancedTable.scss @@ -2,54 +2,72 @@ @import "./themes/vars.scss"; @include themes-mixin { + @include b(advance-table--col-border) { + table { + thead { + tr { + th { + border-right: $--table-td-border-right; + } + } + } + tbody { + tr { + td { + border-right: $--table-td-border-right; + } + } + } + } + } @include b(advance-table) { - @include once { - @include e(wrapper){ + @include once { + @include e(wrapper) { width: 100%; } - @include e(tbody){ + @include e(tbody) { overflow: hidden; border-radius: 12px; } - @include e(td-text){ - &-center{ + @include e(td-text) { + &-center { text-align: center; } - &-left{ + &-left { text-align: left; } - &-right{ + &-right { text-align: right; } - @include m(ellipsis){ + @include m(ellipsis) { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - &>*{ + & > * { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } } - @include e(no-data-tip){ + @include e(no-data-tip) { padding: 5px; text-align: center; width: 100%; display: table-cell; } - @include e(pagination){ + @include e(pagination) { margin-top: 27px; display: flex; justify-content: flex-end; } - @include e(operation){ + @include e(operation) { display: flex; - justify-content:space-between; - &--right,&--left{ + justify-content: space-between; + &--right, + &--left { display: flex; } - } @include e(sortable-column) { cursor: pointer; @@ -78,30 +96,24 @@ &::-webkit-scrollbar:horizontal { height: 5px; } - table thead tr th:last-of-type { - padding-left: 32px; - } } } - @include e(tbody){ + + @include e(tbody) { box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2); } @include b(table) { &::-webkit-scrollbar-thumb { border-radius: 2.5px; background: $--table-scrollbar-color; - } } - @include e(header){ + @include e(header) { background-color: $--table-header-background; i { - color:$--table-header-icon-color; + color: $--table-header-icon-color; } } - - - } } @@ -154,7 +166,7 @@ // } // } - + // @include b(table) { // // background-color: #2b3147; // table { @@ -186,4 +198,4 @@ // padding-left: 32px; // } // } -// } \ No newline at end of file +// } diff --git a/styles/Table.scss b/styles/Table.scss index b4ab351ea..5294103ad 100644 --- a/styles/Table.scss +++ b/styles/Table.scss @@ -1,7 +1,6 @@ @import "./mixins/mixins.scss"; @import "./themes/vars.scss"; - @include themes-mixin { @include b(table) { @include once { @@ -16,17 +15,17 @@ thead { tr { th { - padding: 12px 6px 12px 6px; + padding: 12px 6px 12px 19px; text-align: left; border: none; font-weight: 400; } th:nth-child(1) { - padding-left: 32px; + padding-left: 21px; border-radius: 12px 0 0 0; } th:nth-last-child(1) { - padding-left: 32px; + padding-left: 21px; border-radius: 0 12px 0 0; } } @@ -36,15 +35,15 @@ color: $--table-body-color; tr { td { - padding: 16px 6px 12px 6px; + padding: 16px 6px 12px 19px; text-align: left; border: none; } td:nth-child(1) { - padding-left: 32px; + padding-left: 21px; } td:nth-last-child(1) { - padding-left: 32px; + padding-left: 21px; } } tr:hover { @@ -55,10 +54,19 @@ } background-color: $--table-body-background; box-shadow: $--table-box-shadow; + table { + border-collapse: separate; thead { background-color: $--table-header-background; color: $--table-header-color; + tr { + th { + &:last-of-type { + border-right: 0; + } + } + } } tbody { background-color: $--table-body-background; @@ -66,10 +74,15 @@ tr:hover { background-color: $--table-row-hover; } + tr { + td { + &:last-of-type { + border-right: 0; + } + } + } } - } - } } diff --git a/styles/themes/dark/components/Table.scss b/styles/themes/dark/components/Table.scss index 2600c878b..13fe4da2e 100644 --- a/styles/themes/dark/components/Table.scss +++ b/styles/themes/dark/components/Table.scss @@ -6,4 +6,6 @@ $--table-row-hover: $--table-header-background !global; $--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global; $--table-border: none; + //TODO:ui设计深色color + $--table-td-border-right: none !global; } \ No newline at end of file diff --git a/styles/themes/light/components/Table.scss b/styles/themes/light/components/Table.scss index eaacfc2ad..9e330765e 100644 --- a/styles/themes/light/components/Table.scss +++ b/styles/themes/light/components/Table.scss @@ -6,4 +6,5 @@ $--table-row-hover: rgba(0,0,0,0.03) !global; $--table-box-shadow: none !global; $--table-border:1px solid rgba(0,0,0,0.15) !global; + $--table-td-border-right: 1px solid $alpha-neutral-6 !global; } \ No newline at end of file