大屏表格组件

components/layout/AiDvTable/AiDvTable.vue

@@ -6,17 +6,23 @@
         :key="index"
         :style="{
           width: item.width + 'px',
+          textAlign: item.align,
           flex: item.width ? 'inherit' : 1
         }">
         {{ item.v }}
       </span>
     </div>
     <div class="body">
-      <div class="row" v-for="(item, index) in body" :key="index">
+      <div class="row" v-for="(item, index) in body" :class="[stripe ? 'stripe' : '']" :key="index">
         <div
           v-for="(column, i) in item"
           :key="i"
-          :style="{color: column.color, width: column.width + 'px', flex: column.width ? 'inherit' : 1}">
+          :style="{
+            color: column.color,
+            textAlign: column.align,
+            width: column.width + 'px',
+            flex: column.width ? 'inherit' : 1
+          }">
           <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
           <span>{{ column.v }}</span>
         </div>
@@ -38,6 +44,11 @@
       isShowIndex: {
         type: String,
         default: '0'
+      },
+
+      stripe: {
+        type: String,
+        default: '1'
       }
     },
 
@@ -77,9 +88,9 @@
         })
 
         this.header = value.map(v => {
-          console.log((Number(v.width)))
           return {
             v: v[headerKey],
+            align: v.align,
             width: Number(v.width || 0) ? (Number(v.width || 0) + (this.isShowIndex === '1' ? 0 : 0)) : ''
           }
         })
@@ -89,6 +100,7 @@
             return {
               v: e[v],
               color: e.color,
+              align: e.align,
               width: e.width || ''
             }
           })
@@ -108,7 +120,7 @@
       width: 100%;
       height: 40px;
       padding: 0 20px;
-      background: #252525;
+      background: rgba(70, 70, 70, 0.35);
 
       span {
         flex: 1;
@@ -128,7 +140,7 @@
 
     .body {
       height: calc(100% - 40px);
-      padding: 10px 20px;
+      padding: 10px 0;
       overflow-y: auto;
       box-sizing: border-box;
       .row {
@@ -136,6 +148,12 @@
         align-items: center;
         width: 100%;
         height: 52px;
+        padding: 0 20px;
+        box-sizing: border-box;
+
+        &.stripe:nth-of-type(2n) {
+          background: rgba(48, 48, 48, 0.4);
+        }
 
         div {
           display: flex;