表格样式调整

develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/dataControl.vue

 <template>
-  <div class="">
-    <DatePicker :type="attr.column && attr.column.daterange?attr.column.daterange:'daterange'"  :placement="attr.column && attr.column.placement" :value="attr.row[attr.field]"></DatePicker>
+  <div class="rbcInputControl">
+    <DatePicker
+      :type="
+        attr.column && attr.column.daterange
+          ? attr.column.daterange
+          : 'daterange'
+      "
+      :placement="attr.column && attr.column.placement"
+      :value="attr.row[attr.field]"
+    ></DatePicker>
   </div>
 </template>
 <script>
 export default {
   data() {
-    return {
-      
-    };
+    return {};
   },
   props: {
-    attr:{
-      type:Object,
-      default:()=>{}
-    }
+    attr: {
+      type: Object,
+      default: () => {},
+    },
   },
   watch: {},
   computed: {},
-  methods: {
-   
-  },
+  methods: {},
   mounted() {},
   created() {},
   beforeDestroy() {},
 };
 </script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/inputControl.vue

 <template>
-  <div class="">
+  <div class="rbcInputControl">
     <Input v-model="attr.row[attr.field]"/>
   </div>
 </template>

develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/vxe-table.vue

 <template>
   <div class="detail-table">
-    <vxe-table border ref="xTable" :data="attr.attr.tableData" :show-header="attr.attr.showHeader||false" 
-      :header-cell-class-name="headerCellClassName">
-     <template v-for="(column, index) in attr.attr.columns">
-      <vxe-table-column :field="column.field" :title="column.title" :width="column.width" :key="index">
-        <template slot-scope="scope">
-          <component
-            v-if="column.type"
-            :is="column.type"
-            :attr="{field:column.field,row:scope.row,column:column}"
-          ></component>
-          <span v-else>{{scope.row[column.field]}}</span>
-        </template>
-      </vxe-table-column>
-       </template>
+    <vxe-table
+      border
+      ref="xTable"
+      :data="attr.attr.tableData"
+      :show-header="attr.attr.showHeader || false"
+      :header-cell-class-name="headerCellClassName"
+      :span-method="spanMethods"
+    >
+      <template v-for="(column, index) in attr.attr.columns">
+        <vxe-table-column
+          :field="column.field"
+          :title="column.title"
+          :width="column.width"
+          :height="column.height"
+          :align="column.align"
+          :key="index"
+        >
+          <template slot-scope="scope">
+            <component
+              v-if="
+                attr.attr.headerOne
+                  ? !attr.attr.headerOne.includes(scope.$rowIndex) &&
+                    column.type
+                  : column.type
+              "
+              :is="column.type"
+              :attr="{ field: column.field, row: scope.row, column: column }"
+            ></component>
+            <span v-else style="display: inline-block; height: 38px">{{
+              scope.row[column.field]
+            }}</span>
+          </template>
+        </vxe-table-column>
+      </template>
     </vxe-table>
   </div>
 </template>
@@ -29,24 +49,42 @@ export default {
     vxeTableControl,
     dataControl,
     radioGroupControl,
-    inputControl
+    inputControl,
   },
   data() {
-    return {
-    };
+    return {};
   },
   props: {
-    attr:{
-      type:Object,
-      default:()=>{}
-    }
+    attr: {
+      type: Object,
+      default: () => {},
+    },
   },
   watch: {},
   computed: {},
   methods: {
-    headerCellClassName ({ column, columnIndex }) {
-      if (column.property === 'content') {
-        return 'col-white'
+    headerCellClassName({ column, columnIndex }) {
+      if (column.property === "content") {
+        return "col-white";
+      }
+    },
+    spanMethods({ row, $rowIndex, column, data }) {
+      let fields = ["firstIndex", "secondIndex"];
+      let cellValue = row[column.property];
+      if (cellValue && fields.includes(column.property)) {
+        let prevRow = data[$rowIndex - 1];
+        let nextRow = data[$rowIndex + 1];
+        if (prevRow && prevRow[column.property] === cellValue) {
+          return { rowspan: 0, colspan: 0 };
+        } else {
+          let countRowspan = 1;
+          while (nextRow && nextRow[column.property] === cellValue) {
+            nextRow = data[++countRowspan + $rowIndex];
+          }
+          if (countRowspan > 1) {
+            return { rowspan: countRowspan, colspan: 1 };
+          }
+        }
       }
     },
   },
@@ -57,6 +95,9 @@ export default {
 </script>
 <style lang="less" scoped>
 .detail-table {
+   margin-left:-11px;
+   margin-top:-1px;
+   width: calc(100% + 23px);
   .vxe-header--column .col-white {
     background-color: #fff !important;
   }