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-05-08 20:43:01 +08:00
parent 28a1cd5cf7
commit 6256c3908f
4 changed files with 156 additions and 97 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="table"> <div class="table">
<ul class="thead"></ul> <ul class="thead"></ul>
<ul class="tbody"></ul> <wc-scroll class="tbody"><slot /></wc-scroll>
<ul class="tfoot"></ul> <ul class="tfoot"></ul>
</div> </div>
</template> </template>
@ -10,7 +10,6 @@
:host { :host {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%;
color: nth($cd, 1); color: nth($cd, 1);
} }
ul, ul,
@ -23,16 +22,12 @@ li {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-top: 1px solid nth($cp, 3); border: 1px solid nth($cp, 3);
border-left: 1px solid nth($cp, 3); border-right: 0;
ul {
width: 100%;
}
.thead, .thead,
.tfoot { .tfoot {
// height: 40px; width: 100%;
background: nth($cp, 1); background: nth($cp, 1);
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -49,116 +44,106 @@ li {
min-height: 36px; min-height: 36px;
border-right: 1px solid nth($cp, 3); border-right: 1px solid nth($cp, 3);
border-bottom: 1px solid nth($cp, 3); border-bottom: 1px solid nth($cp, 3);
&.flex-2 {
flex: 2;
}
&.flex-3 {
flex: 3;
}
&.flex-4 {
flex: 4;
}
&.flex-5 {
flex: 5;
}
&.flex-6 {
flex: 6;
}
&.flex-7 {
flex: 7;
}
&.flex-8 {
flex: 8;
}
} }
.thead .td { .thead .td {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.tbody .tr:hover {
background-color: #fbfbfb;
}
.cell { .cell {
padding: 3px 5px; padding: 3px 5px;
word-wrap: break-word;
word-break: break-all;
} }
} }
</style> </style>
<script> <script>
import '../scroll/index'
import './tr'
import './td'
export default class Table { export default class Table {
props = { props = {
list: null thead: null,
flex: []
} }
__init__() { __init__() {
/* render */ /* render */
this.__OUTER__ = this.root.children[1] var elem = this.root.children[1]
} this.__THEAD__ = elem.children[0]
this.__TBODY__ = elem.children[1]
__updateTable__(force) { this.__TFOOT__ = elem.children[2]
if (this._clear && !force) {
delete this._clear
return
}
var { items } = this.props
if (!this._clear) {
items = Array.from(this.children)
.filter(it => it.tagName === 'WC-TABLE-ITEM')
.map(it => {
return {
label: it.getAttribute('label'),
prop: it.getAttribute('prop')
}
})
this.props.items = items
}
this._clear = true
this.innerText = ''
this.__render__()
} }
__render__() { __render__() {
var { list, items } = this.props var { thead, flex } = this.props
if (list && items) { if (thead) {
this.__OUTER__.innerHTML = ` this.__THEAD__.innerHTML = `
<ul class="thead">
<li class="tr"> <li class="tr">
${items ${thead
.map(_ => { .map((name, i) => {
let w = flex[i]
if (typeof w === 'number') {
w = ` flex-${w || 1}"`
} else {
w = `" style="${w}"`
}
return ` return `
<section class="td"> <section class="td${w}>
<div class="cell">${_.label}</div> <div class="cell">${name}</div>
</section>`
})
.join('')}
</li>
</ul>
<ul class="tbody">
${list
.map((it, i) => {
return `<li class="tr">
${items
.map(_ => {
return `
<section class="td">
<div class="cell">${it[_.prop]}</div>
</section>` </section>`
}) })
.join('')} .join('')}
</li>` </li>`
})
.join('')}
</ul>`
} }
} }
mounted() { mounted() {
// this.__updateTable__() var tds = Array.from(this.children[0].children).map(it => {
let flex = +it.getAttribute('flex') || 1
let style = it.getAttribute('style')
this.__observer = new MutationObserver(_ => this.__updateTable__(true)) return style || flex
this.__observer.observe(this, {
childList: true,
subtree: true,
characterData: true
}) })
this.props.flex = tds
log(tds)
} }
watch() { watch() {
switch (name) { switch (name) {
case 'list': case 'thead':
if (val) { if (val) {
try { try {
this.props.list = JSON.parse(val) this.props.thead = JSON.parse(val)
this.__render__() this.__render__()
} catch (err) {} } catch (err) {}
this.removeAttribute('options') this.removeAttribute('thead')
} }
break break

View File

@ -1,21 +0,0 @@
<template>
<div><slot /></div>
</template>
<style lang="scss">
div {
color: #f30;
}
</style>
<script>
export default class TableItem {
props = {
foo: ''
}
__init__() {
/* render */
}
}
</script>

67
src/table/td.wc Normal file
View File

@ -0,0 +1,67 @@
<template>
<div class="cell"><slot /></div>
</template>
<style lang="scss">
:host {
flex: 1;
display: flex;
align-items: center;
min-height: 36px;
border-right: 1px solid nth($cp, 3);
}
:host([flex='2']) {
flex: 2;
}
:host([flex='3']) {
flex: 3;
}
:host([flex='4']) {
flex: 4;
}
:host([flex='5']) {
flex: 5;
}
:host([flex='6']) {
flex: 6;
}
:host([flex='7']) {
flex: 7;
}
:host([flex='8']) {
flex: 8;
}
.cell {
padding: 3px 5px;
word-wrap: break-word;
word-break: break-all;
}
</style>
<script>
export default class TableTd {
props = {
width: null
}
__init__() {
/* render */
}
watch() {
switch (name) {
case 'width':
var n = +val
if (n === n) {
this.style.cssText = `flex:0 0 auto; width: ${n}px;`
}
this.removeAttribute('width')
this.removeAttribute('flex')
break
default:
break
}
}
}
</script>

28
src/table/tr.wc Normal file
View File

@ -0,0 +1,28 @@
<template>
<slot />
</template>
<style lang="scss">
:host {
// flex: 1;
display: flex;
width: auto;
border-bottom: 1px solid nth($cp, 3);
color: inherit;
}
:host(:hover) {
background-color: #fbfbfb;
}
</style>
<script>
export default class TableTr {
props = {
foo: ''
}
__init__() {
/* render */
}
}
</script>