重新构建表格组件
parent
3d33539a4a
commit
28a1cd5cf7
|
@ -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 {
|
||||||
|
|
|
@ -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')
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue