表格增加宽高配置

report-ui/src/views/report/bigscreen/designer/designerComponents/dynamicAddTable.vue

@@ -6,11 +6,12 @@
       icon="el-icon-plus"
       plain
       @click="handleAddClick"
-      >新增</el-button
+    >新增</el-button
     >
     <el-table :data="formData" style="width: 100%">
-      <el-table-column prop="name" label="名称" width="80" />
+      <el-table-column prop="name" label="名称" width="60" />
-      <el-table-column prop="key" label="key值" width="80" />
+      <el-table-column prop="key" label="key值" width="70" />
+      <el-table-column prop="width" label="宽度" width="50" />
       <el-table-column label="操作" width="100">
         <template slot-scope="scope">
           <div class="button-group">
@@ -18,13 +19,13 @@
               @click="handleEditorClick(scope.$index, scope.row)"
               type="text"
               size="small"
-              >编辑</el-button
+            >编辑</el-button
             >
             <el-button
               type="text"
               size="small"
               @click="handleDeleteClick(scope.$index, scope.row)"
-              >删除</el-button
+            >删除</el-button
             >
           </div>
         </template>
@@ -54,11 +55,19 @@
           >
           </el-input>
         </el-form-item>
+        <el-form-item label="宽度:">
+          <el-input
+            v-model.trim="rowFormData['width']"
+            placeholder="请输入宽度"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
         <el-button size="mini" type="primary" @click="handleSaveClick"
-          >确 定</el-button
+        >确 定</el-button
         >
       </span>
     </el-dialog>

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-table.js

@@ -50,6 +50,14 @@ export const widgetTable = {
           placeholder: '',
           value: '5'
         },
+        {
+          type: 'el-input-number',
+          label: '行高',
+          name: 'rowHeight',
+          required: false,
+          placeholder: '',
+          value: '50'
+        },
         {
           type: 'el-switch',
           label: '开启滚动',
@@ -172,10 +180,10 @@ export const widgetTable = {
           name: 'dynamicAddTable',
           required: false,
           placeholder: '',
-          value: [{name: '日期', key: 'date', width: 200}, {name: '姓名', key: 'name', width: 200}, {
+          value: [
-            name: '地址',
+            {name: '日期', key: 'date', width: '50%'},
-            key: 'address',
+            {name: '姓名', key: 'name', width: '50%'},
-            width: '200'
+            {name: '地址', key: 'address', width: '200%',
           }]
         }
       ],

report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue

@@ -5,7 +5,7 @@
       <div class="title">
         <div
           v-for="(item, index) in header"
-          :style="headerTableStlye"
+          :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
           :key="index"
         >
           {{ item.name }}
@@ -14,11 +14,11 @@
       <!--数据-->
       <div class="bd">
         <ul class="infoList">
-          <li v-for="(item, index) in list" :key="index">
+          <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" >
             <div
               v-for="(itemChild, idx) in header"
               :key="idx"
-              :style="[bodyTableStyle, bodyTable(index)]"
+              :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
             >
               {{ item[itemChild.key] }}
             </div>
@@ -48,7 +48,8 @@ export default {
         autoPage: true,
         //effect: "top",
         autoPlay: true,
-        vis: 5
+        vis: 5,
+        rowHeight:'50px'
       },
       header: [],
       list: [],
@@ -172,15 +173,32 @@ export default {
     },
     // 计算 奇偶背景色
     bodyTable(index) {
+      var styleJson = {};
       if (index % 2) {
-        return {
+        styleJson["background-color"] = this.optionsSetUp.eventColor
-          "background-color": this.optionsSetUp.eventColor
-        };
       } else {
-        return {
+        styleJson["background-color"] = this.optionsSetUp.oldColor
-          "background-color": this.optionsSetUp.oldColor
-        };
       }
+      return styleJson;
+    },
+    tableRowHeight(){
+      var styleJson = {};
+      if(this.optionsSetUp.rowHeight){
+        styleJson['height'] = this.optionsSetUp.rowHeight+'px';
+        styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
+      }else{
+        styleJson['height'] =this.options.rowHeight
+        styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
+      }
+      return styleJson;
+    },
+    tableFiledWidth(index){
+      var styleJson = {};
+      debugger
+      if(this.optionsSetUp.dynamicAddTable[index].width ){
+        styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
+      }
+      return styleJson
     }
   }
 };