重新构建表格组件

src/markd/index.wc

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

src/table/index.wc

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