feat--表格优化，数据文字超长显示...

report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue

@@ -12,7 +12,7 @@
       <el-table-column prop="name" label="名称" width="60" />
       <el-table-column prop="key" label="key值" width="70" />
       <el-table-column prop="width" label="宽度" width="50" />
-      <el-table-column label="操作" width="100">
+      <el-table-column label="操作" width="90">
         <template slot-scope="scope">
           <div class="button-group">
             <el-button

report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js

@@ -22,27 +22,6 @@ export const widgetTable = {
         placeholder: '',
         value: '表格',
       },
-      {
-        type: 'el-select',
-        label: '字体位置',
-        name: 'textAlign',
-        required: false,
-        placeholder: '',
-        selectOptions: [
-          { code: 'center', name: '居中' },
-          { code: 'left', name: '左对齐' },
-          { code: 'right', name: '右对齐' },
-        ],
-        value: 'center'
-      },
-      {
-        type: 'el-input-number',
-        label: '字体字号',
-        name: 'fontSize',
-        required: false,
-        placeholder: '',
-        value: '16'
-      },
       {
         type: 'el-input-number',
         label: '显示行数',
@@ -59,6 +38,116 @@ export const widgetTable = {
         placeholder: '',
         value: '50'
       },
+      [
+        {
+          name: '表头设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '表头显隐',
+              name: 'isHeader',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-select',
+              label: '文字位置',
+              name: 'textAlignHeader',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeHeader',
+              required: false,
+              placeholder: '',
+              value: '16'
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'headColor',
+              require: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'vue-color',
+              label: '表头背景色',
+              name: 'headBackColor',
+              require: false,
+              placeholder: '',
+              value: '#0a73ff',
+            },
+          ],
+        },
+        {
+          name: '表体设置',
+          list: [
+            {
+              type: 'el-select',
+              label: '文字位置',
+              name: 'textAlignBody',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeBody',
+              required: false,
+              placeholder: '',
+              value: '16'
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'bodyColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'vue-color',
+              label: '表体背景色',
+              name: 'tableBgColor',
+              require: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'vue-color',
+              label: '奇行颜色',
+              name: 'oldColor',
+              require: false,
+              placeholder: '',
+              value: '#0a2732',
+            },
+            {
+              type: 'vue-color',
+              label: '偶行颜色',
+              name: 'eventColor',
+              required: false,
+              placeholder: '',
+              value: '#003b51'
+            }
+          ],
+        },
+      ],
       {
         type: 'el-switch',
         label: '开启滚动',
@@ -127,74 +216,6 @@ export const widgetTable = {
         placeholder: '',
         value: '#fff'
       },
-      [
-        {
-          name: '表头设置',
-          list: [
-            {
-              type: 'el-switch',
-              label: '表头显隐',
-              name: 'isHeader',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'vue-color',
-              label: '表头颜色',
-              name: 'headColor',
-              require: false,
-              placeholder: '',
-              value: '#fff',
-            },
-            {
-              type: 'vue-color',
-              label: '表头背景',
-              name: 'headBackColor',
-              require: false,
-              placeholder: '',
-              value: '#0a73ff',
-            },
-          ],
-        },
-        {
-          name: '表体设置',
-          list: [
-            {
-              type: 'vue-color',
-              label: '文字颜色',
-              name: 'bodyColor',
-              required: false,
-              placeholder: '',
-              value: '#fff',
-            },
-            {
-              type: 'vue-color',
-              label: '表格背景色',
-              name: 'tableBgColor',
-              require: false,
-              placeholder: '',
-              value: '',
-            },
-            {
-              type: 'vue-color',
-              label: '奇行颜色',
-              name: 'oldColor',
-              require: false,
-              placeholder: '',
-              value: '#0a2732',
-            },
-            {
-              type: 'vue-color',
-              label: '偶行颜色',
-              name: 'eventColor',
-              required: false,
-              placeholder: '',
-              value: '#003b51'
-            }
-          ],
-        },
-      ],
       {
         type: 'dynamic-add-table',
         label: '',
@@ -204,9 +225,8 @@ export const widgetTable = {
         value: [
           { name: '日期', key: 'date', width: '50%' },
           { name: '姓名', key: 'name', width: '50%' },
-          {
-            name: '地址', key: 'address', width: '200%',
-          }]
+          {name: '地址', key: 'address', width: '200%',}
+          ]
       }
     ],
     data: [

report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue

@@ -5,7 +5,7 @@
       <div class="title">
         <div
           v-for="(item, index) in header"
-          :style="[headerTableStlye, tableFiledWidth(index), tableRowHeight()]"
+          :style="[headerTableStyle, tableFiledWidth(index), tableRowHeight()]"
           :key="index"
         >
           {{ item.name }}
@@ -58,7 +58,6 @@ export default {
         mainCell: ".bd ul",
         effect: "topLoop",
         autoPage: true,
-        //effect: "top",
         autoPlay: true,
         vis: 5,
         rowHeight: "50px"
@@ -73,7 +72,6 @@ export default {
   },
   computed: {
     styleObj() {
-      console.log(this.optionsSetUp);
       const allStyle = this.optionsPosition;
       return {
         position: this.ispreview ? "absolute" : "static",
@@ -87,11 +85,11 @@ export default {
     allComponentLinkage() {
       return this.$store.state.designer.allComponentLinkage;
     },
-    headerTableStlye() {
+    headerTableStyle() {
       const headStyle = this.optionsSetUp;
       return {
-        "text-align": headStyle.textAlign,
-        "font-size": headStyle.fontSize + "px",
+        "text-align": headStyle.textAlignHeader,
+        "font-size": headStyle.fontSizeHeader + "px",
         "border-style": headStyle.isLine ? "solid" : "none",
         "border-width": headStyle.borderWidth + "px",
         "border-color": headStyle.borderColor,
@@ -103,8 +101,8 @@ export default {
     bodyTableStyle() {
       const bodyStyle = this.optionsSetUp;
       return {
-        "text-align": bodyStyle.textAlign,
-        "font-size": bodyStyle.fontSize + "px",
+        "text-align": bodyStyle.textAlignBody,
+        "font-size": bodyStyle.fontSizeBody + "px",
         "border-style": bodyStyle.isLine ? "solid" : "none",
         "border-width": bodyStyle.borderWidth + "px",
         "border-color": bodyStyle.borderColor,
@@ -219,6 +217,9 @@ export default {
     },
     tableRowHeight() {
       let styleJson = {};
+      styleJson["overflow"] = "hidden";
+      styleJson["white-space"] = "nowrap";
+      styleJson["text-overflow"] = "ellipsis";
       if (this.optionsSetUp.rowHeight) {
         styleJson["height"] = this.optionsSetUp.rowHeight + "px";
         styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";