CN-37 feat: table功能完善

src/components/charts/ChartTable.vue

@@ -10,8 +10,9 @@
     </div>
     <div class="cn-chart__body">
       <el-table
-          :data="tableData"
           style="width: 100%"
+          tooltip-effect="light"
+          :data="tableData"
       >
         <el-table-column
             type="index"
@@ -20,6 +21,7 @@
         </el-table-column>
         <el-table-column
             v-for="(c, i) in tableColumns"
+            show-overflow-tooltip
             :key="i"
             :prop="c"
         >
@@ -29,6 +31,7 @@
       </el-table>
     </div>
     <div class="cn-chart__footer">
+      <slot name="footer"></slot>
     </div>
   </div>
 </template>

src/components/charts/ChartTablePagination.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-pagination
+      small
+      layout="prev,jumper,slot,next"
+      class="chart-table-pagination"
+      :total="total"
+      :page-size="pageSize"
+      @current-change="current"
+  >
+    <span>/&nbsp;{{totalPage}}</span>
+  </el-pagination>
+</template>
+
+<script>
+import { chartTableDefaultPageSize } from '@/utils/constants'
+export default {
+  name: 'ChartTablePagination',
+  props: {
+    total: Number
+  },
+  data () {
+    return {
+      pageSize: chartTableDefaultPageSize
+    }
+  },
+  computed: {
+    totalPage () {
+      const remainder = this.total % this.pageSize
+      if (remainder) {
+        return parseInt(this.total / this.pageSize) + 1
+      } else {
+        return parseInt(this.total / this.pageSize)
+      }
+    }
+  },
+  methods: {
+    current (val) {
+      this.$emit('pageJump', val)
+    }
+  },
+  mounted () {
+    this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
+  }
+}
+</script>
+
+<style lang="scss">
+.chart-table-pagination.el-pagination {
+  padding: 12px 0 9px 0;
+  text-align: center;
+
+  .el-pagination__jump {
+    margin-left: 10px;
+  }
+}
+</style>

src/components/charts/panel.scss

@@ -167,6 +167,37 @@
           .option__button.icon-group-item:last-of-type:not(:first-of-type) {
             padding: 0 0 0 5px;
           }
+          .option__select {
+            .el-input__inner {
+              padding-right: 20px;
+              width: 120px;
+              border: none;
+              height: 100%;
+              line-height: 20px;
+              color: $--color-primary;
+            }
+            .el-input__prefix > div {
+              font-weight: normal;
+              line-height: 19px;
+              color: $--color-primary;
+            }
+            .el-input__suffix {
+              display: flex;
+              .el-input__suffix-inner {
+                line-height: 14px;
+                .el-select__caret {
+                  line-height: 14px;
+                  width: 16px;
+                  color: $--color-primary;
+                }
+              }
+            }
+          }
+          .option__select.select__topn {
+            .el-input__inner {
+              width: 80px;
+            }
+          }
           .icon-group-divide {
             height: 14px;
             width: 1px;
@@ -204,4 +235,11 @@
       }
     }
   }
-}
+}
+.option__topn-popper {
+  .el-select-dropdown__item {
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+}