This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

更新表格

old
宇天 2020-07-16 20:10:34 +08:00
parent f1298d1950
commit f7c455535f
4 changed files with 44 additions and 24 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="container"><slot></slot></div> <div class="container"><slot /></div>
<div class="is-horizontal"><span class="thumb"></span></div> <div class="is-horizontal"><span class="thumb"></span></div>
<div class="is-vertical"><span class="thumb"></span></div> <div class="is-vertical"><span class="thumb"></span></div>
</template> </template>

View File

@ -13,19 +13,35 @@
color: nth($cd, 1); color: nth($cd, 1);
} }
.table { .table {
overflow: hidden;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid nth($cp, 3); width: 100%;
height: 100%;
.thead, .thead,
.tfoot { .tfoot {
overflow: hidden;
width: 100%; width: 100%;
border: 1px solid nth($cp, 3);
--border-bottom: 0;
background: nth($cp, 1); background: nth($cp, 1);
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
} }
.thead {
border-bottom: 0;
}
.tfoot {
display: none;
border-top: 0;
}
.tbody {
border: 1px solid nth($cp, 3);
::slotted(wc-tr:last-child) {
--border-bottom: 0;
}
}
} }
</style> </style>
@ -63,7 +79,7 @@ export default class Table {
} else { } else {
w = '' w = ''
} }
return `<wc-td leaf align="center" ${w}>${name}</wc-td>` return `<wc-td no-border align="center" ${w}>${name}</wc-td>`
}) })
.join('') .join('')
} }

View File

@ -8,9 +8,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 60px; min-width: 60px;
min-height: 36px; // height: auto;
border-right: 1px solid nth($cp, 3); border-left: 1px solid nth($cp, 3);
border-top: 1px solid nth($cp, 3);
.cell {
min-height: 36px;
padding: 3px 5px;
word-wrap: break-word;
word-break: break-all;
}
} }
:host([flex='2']) { :host([flex='2']) {
flex: 2; flex: 2;
@ -39,12 +45,6 @@
:host([align='right']) { :host([align='right']) {
justify-content: flex-end; justify-content: flex-end;
} }
.cell {
padding: 3px 5px;
word-wrap: break-word;
word-break: break-all;
}
</style> </style>
<script> <script>

View File

@ -1,26 +1,30 @@
<template> <template>
<slot /> <div class="tr"><slot /></div>
</template> </template>
<style lang="scss"> <style lang="scss">
:host { :host {
display: flex; display: flex;
// min-height: 36px; // min-height: 36px;
width: auto;
color: inherit; color: inherit;
.tr {
flex: 1;
display: flex;
flex-wrap: nowrap;
// border-top: var(--border, 0);
// border-right: var(--border, 0);
border-bottom: var(--border-bottom, 1px solid nth($cp, 3));
// border-left: var(--border, 0);
}
} }
:host(:hover) { :host(:hover) {
background-color: #fbfbfb; background-color: #fbfbfb;
} }
:host(.thead) ::slotted(wc-td[leaf]) { ::slotted(wc-td:first-child) {
border-top: 0; border-left: 0;
}
::slotted(wc-td:last-child) {
border-right: 0;
}
:host(.thead) {
overflow-x: hidden;
} }
</style> </style>