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>
<div class="container"><slot></slot></div>
<div class="container"><slot /></div>
<div class="is-horizontal"><span class="thumb"></span></div>
<div class="is-vertical"><span class="thumb"></span></div>
</template>

View File

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

View File

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

View File

@ -1,26 +1,30 @@
<template>
<slot />
<div class="tr"><slot /></div>
</template>
<style lang="scss">
:host {
display: flex;
// min-height: 36px;
width: auto;
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) {
background-color: #fbfbfb;
}
:host(.thead) ::slotted(wc-td[leaf]) {
border-top: 0;
}
::slotted(wc-td:last-child) {
border-right: 0;
}
:host(.thead) {
overflow-x: hidden;
::slotted(wc-td:first-child) {
border-left: 0;
}
</style>