op填写合并table

src/components/OP/CarTouristGuideGrounContent.vue

@@ -46,14 +46,14 @@
             <hr style='background-color:#5555; height:1px; border:none;' />
             <div>
                 <template>
-                    <el-table :data="ContentList" :border=true style="width: 100%">
+                    <el-table :data="ContentList" :border=true style="width: 100%" :span-method="objectSpanMethod">
                         <el-table-column prop="num" label="序 号" width="55">
                             <template slot-scope="scope">
                                 {{ scope.$index + 1 }}
 
                             </template>
                         </el-table-column>
-                        <el-table-column prop="SIdName" label="费用项目" width="120">
+                        <el-table-column :align="'center'" prop="SIdName" label="费用项目" width="120">
                             <template slot-scope="scope">
                                 <span style="display: none;">{{ scope.row.sId }}</span>{{ scope.row.sidName }}
                             </template>
@@ -232,6 +232,7 @@ export default {
             checkItems: ["车费", "导游费", "客户午餐费用", "导游景点费", "导游小费", "接送机费", "其他费用", "司机工资", "司机小费", "司机餐补", "车超时费", "导游餐补", "导游房补", "导游交通", "客户早餐费用", "客户晚餐费用", "景点门票费", "饮料/零食/水果", "住补费用", "翻译费"],
             checkList: [],
             sourceList: [],
+            ListCount: 1,
         }
     },
     methods: {
@@ -459,6 +460,43 @@ export default {
                 }
             }
             this.PriceChange();
+            var count = 1;
+            if (this.ContentList.length > 0) {
+                var sid = this.ContentList[0].sId;
+                count = this.ContentList.filter(x => x.sId == sid).length;
+            }
+            this.ListCount = count;
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            if (columnIndex === 1) {
+
+                if (rowIndex % this.ListCount === 0) {
+                    return {
+                        rowspan: this.ListCount,
+                        colspan: 1
+                    };
+                } else {
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    };
+                }
+
+                // if (columnIndex === 1) {
+                //     if (rowIndex % 2 === 0) {
+                //         return {
+                //             rowspan: 2,
+                //             colspan: 1
+                //         };
+                //     } else {
+                //         return {
+                //             rowspan: 0,
+                //             colspan: 0
+                //         };
+                //     }
+                // }
+
+            }
         }
     },