大屏表格组件

components/AiDvRender.vue

@@ -33,6 +33,7 @@
       <AiDvTable
         v-else-if="data.type === 'AiDvTable'"
         :heigth="'100%'"
+        :stripe="data.stripe"
         :isShowIndex="data.isShowIndex"
         :data="values">
       </AiDvTable>

components/AiDvViewer.vue

@@ -12,8 +12,8 @@
           zIndex: item.zIndex,
           transform: `scale(${scale})`
         }"
-          v-for="(item, index) in componentList"
-          :key="index">
+        v-for="(item, index) in componentList"
+        :key="index">
         <ai-dv-render :instance="instance" :data="item" :index="index" :theme="dashboard.theme"/>
       </div>
     </div>

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;

packages/bigscreen/designer/components/form/componentConfig.vue

@@ -78,6 +78,21 @@
               </el-select>
             </div>
           </div>
+          <div class="layout-config__item" v-if="config.type === 'AiDvTable'">
+            <label>斑马纹</label>
+            <div class="layout-config__item--right">
+              <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
+                <el-option
+                  label="是"
+                  value="1">
+                </el-option>
+                <el-option
+                  label="否"
+                  value="0">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
           <div class="layout-config__item">
             <label>表格行数</label>
             <div class="layout-config__item--right">

packages/bigscreen/designer/config.js

@@ -501,6 +501,7 @@ const components = [
             dataX: '',
             dataY: [],
             rowNum: 7,
+            stripe: '1',
             isShowIndex: '1',
             sourceDataId: '',
             api: '',