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