push

lib/component/echarts/components/other/BasicTable copy.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="table-view" id="tableView">
+
+
+        <table class="table-main" border="0" cellpadding = "10" align="left" >
+            <thead>
+                <tr height="25" valign="middle">
+                    <td v-for="(value,key,index) in theadDatas" :key="index">{{value}}</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in tableDatas" :key="item.id">
+                  <td v-for="(value,key,index) in item" :key="index">{{value}}</td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+
+</template>
+<script>
+  import { defineComponent } from 'vue';
+//   import { init } from './js/index.js'
+
+  export default defineComponent({
+    name: 'baisicTable',
+    props: {},
+    data() {
+      return {
+        theadDatas:{num:"车牌号",color:"车牌颜色",positon:"违停地点",time:"违停时间"},
+        tableDatas:[
+            {num:"沪866B61",color:"#57D0EB",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
+            {num:"沪866B61",color:"#57D0EB",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"}
+        ],
+        theadKeys:null,
+      }
+    },
+    created() {
+        this.theadKeys = Object.keys(this.theadDatas);
+    },
+    mounted() {
+        // init();
+    },
+    methods: {
+
+    }
+
+  })
+</script>
+<style lang="less" scoped>
+  .table-view{
+    // position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 1.5px solid #0E748A;
+    box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
+    .table-main{
+      //  border = "1" width = "90%" cellspacing="0" cellpadding = "10"
+      color: #FFFFFF;
+      font-size: 10;
+      // border: 1.5px solid #0E748A;
+      thead{
+        text-align: left;
+        width: 90%;
+        background-color: #005062;
+      }
+      td{
+        // width:100%;
+
+        word-break:keep-all; /* 不换行 */
+
+        white-space:nowrap; /* 不换行 */
+
+        overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
+
+      }
+      thead{
+        opacity: 0.65;
+      }
+
+    }
+  }
+
+
+
+
+
+</style>