更新表格
parent
f1298d1950
commit
f7c455535f
|
@ -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>
|
||||
|
|
|
@ -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('')
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Reference in New Issue