大屏组件开发

components/layout/AiDvTable/AiDvTable.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="aiDvTable">
     <div class="header">
-      <span v-for="(item, index) in header" :key="index">{{ item }}</span>
+      <span
+        v-for="(item, index) in header"
+        :key="index"
+        :style="{
+        width: item.width + 'px', flex: item.width ? 'inherit' : 1}">
+        {{ item.v }}
+      </span>
     </div>
     <div class="body">
       <div class="row" v-for="(item, index) in body" :key="index">
-        <span v-for="(column, i) in item" :key="i">{{ column }}</span>
+        <div
+          v-for="(column, i) in item"
+          :key="i"
+          :style="{color: column.color, width: column.width + 'px', flex: column.width ? 'inherit' : 1}">
+          <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
+          <span>{{ column.v }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -19,13 +31,19 @@
       data: {
         type: Array,
         default: () => []
+      },
+
+      isShowIndex: {
+        type: String,
+        default: '0'
       }
     },
 
     data () {
       return {
         header: [],
-        body: []
+        body: [],
+        colorIndex: ''
       }
     },
 
@@ -52,12 +70,26 @@
         }
 
         const headerKey = Object.keys(value[0])[0]
-        const bodyKey = Object.keys(value[0]).filter(v => v !== headerKey)
-        this.header = this.data.map(v => v[headerKey])
-        this.body = bodyKey.map(v => {
-          return value.map(e => e[v])
+        const bodyKey = Object.keys(value[0]).filter(v => {
+          return v !== headerKey && v !== 'color' && v !== 'width'
+        })
+
+        this.header = value.map(v => {
+          return {
+            v: v[headerKey],
+            width: v.width || ''
+          }
+        })
+        console.log(this.header)
+        this.body = bodyKey.map(v => {
+          return value.map(e => {
+            return {
+              v: e[v],
+              color: e.color,
+              width: e.width || ''
+            }
+          })
         })
-        console.log(this.body)
       }
     }
   }
@@ -65,6 +97,8 @@
 
 <style lang="scss" scoped>
   .aiDvTable {
+    height: 100%;
+    overflow: hidden;
     .header {
       display: flex;
       align-items: center;
@@ -77,7 +111,7 @@
         flex: 1;
         font-size: 16px;
         text-align: center;
-        color: #bfc0bb;
+        color: rgba(255, 255, 255, 0.7);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -90,14 +124,20 @@
     }
 
     .body {
-      padding: 10px;
+      height: calc(100% - 40px);
+      padding: 10px 12px;
+      overflow-y: auto;
+      box-sizing: border-box;
       .row {
         display: flex;
         align-items: center;
         width: 100%;
         height: 52px;
 
-        span {
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
           flex: 1;
           font-size: 16px;
           text-align: center;
@@ -107,7 +147,29 @@
           text-overflow: ellipsis;
           -o-text-overflow:ellipsis;
 
+          span {
+            flex: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            -o-text-overflow:ellipsis;
+          }
+
+          i {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            margin-right: 10px;
+            text-align: center;
+            font-size: 12px;
+            color: #18FEFE;
+            font-style: normal;
+            background: url(./asset/rankbg.png) no-repeat;
+            background-size: 100% 100%;
+          }
+
           &:first-child {
+            justify-content: start;
             text-align: left;
           }
         }