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 09:42:44 +08:00
parent 3d33539a4a
commit 28a1cd5cf7
2 changed files with 110 additions and 39 deletions

View File

@ -221,7 +221,6 @@ table {
border-collapse: collapse; border-collapse: collapse;
tr { tr {
border-top: 1px solid #ccc;
background-color: #fff; background-color: #fff;
} }
thead tr { thead tr {

View File

@ -1,27 +1,71 @@
<template> <template>
<div class="table"></div> <div class="table">
<ul class="thead"></ul>
<ul class="tbody"></ul>
<ul class="tfoot"></ul>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.table { :host {
display: flex; display: flex;
width: 100%;
li { height: 100%;
display: flex; color: nth($cd, 1);
}
section {
margin: 0 2px;
}
} }
ul, ul,
li { li {
list-style: none; list-style: none;
} }
.table {
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border-top: 1px solid nth($cp, 3);
border-left: 1px solid nth($cp, 3);
ul {
width: 100%;
}
.thead,
.tfoot {
// height: 40px;
background: nth($cp, 1);
user-select: none;
-moz-user-select: none;
}
.tr {
display: flex;
height: 100%;
}
.td {
flex: 1;
display: flex;
align-items: center;
min-height: 36px;
border-right: 1px solid nth($cp, 3);
border-bottom: 1px solid nth($cp, 3);
}
.thead .td {
justify-content: center;
text-align: center;
}
.tbody .tr:hover {
background-color: #fbfbfb;
}
.cell {
padding: 3px 5px;
}
}
</style> </style>
<script> <script>
// import './item'
export default class Table { export default class Table {
props = { props = {
list: null list: null
@ -32,14 +76,16 @@ export default class Table {
this.__OUTER__ = this.root.children[1] this.__OUTER__ = this.root.children[1]
} }
__updateTable__() { __updateTable__(force) {
if (this._clear) { if (this._clear && !force) {
delete this._clear delete this._clear
return return
} }
log('-----------')
var { list } = this.props var { items } = this.props
var items = Array.from(this.children)
if (!this._clear) {
items = Array.from(this.children)
.filter(it => it.tagName === 'WC-TABLE-ITEM') .filter(it => it.tagName === 'WC-TABLE-ITEM')
.map(it => { .map(it => {
return { return {
@ -47,30 +93,56 @@ export default class Table {
prop: it.getAttribute('prop') prop: it.getAttribute('prop')
} }
}) })
this.props.items = items
}
this._clear = true this._clear = true
this.innerText = '' this.innerText = ''
if (list) {
this.__OUTER__.innerHTML = this.__render__()
'<ul>' + }
list
.map((it, i) => { __render__() {
return ( var { list, items } = this.props
'<li>' +
items if (list && items) {
this.__OUTER__.innerHTML = `
<ul class="thead">
<li class="tr">
${items
.map(_ => { .map(_ => {
return `<section>${it[_.prop]}</section>` return `
<section class="td">
<div class="cell">${_.label}</div>
</section>`
}) })
.join('') + .join('')}
'</li>' </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>`
}) })
.join('') + .join('')}
'</ul>' </li>`
})
.join('')}
</ul>`
} }
} }
mounted() { mounted() {
this.__observer = new MutationObserver(_ => this.__updateTable__()) // this.__updateTable__()
this.__observer = new MutationObserver(_ => this.__updateTable__(true))
this.__observer.observe(this, { this.__observer.observe(this, {
childList: true, childList: true,
subtree: true, subtree: true,
@ -82,9 +154,9 @@ export default class Table {
switch (name) { switch (name) {
case 'list': case 'list':
if (val) { if (val) {
log('===========')
try { try {
this.props.list = JSON.parse(val) this.props.list = JSON.parse(val)
this.__render__()
} catch (err) {} } catch (err) {}
this.removeAttribute('options') this.removeAttribute('options')
} }