重构表格组件
parent
28a1cd5cf7
commit
6256c3908f
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
@ -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>
|
Reference in New Issue