表格合并

src/components/AnalyseModule/components/table.vue

@@ -7,7 +7,7 @@
 <!--  -->
 <template>
   <div class="container_box">
-    <table class="table_box" :id="chart_id">
+    <table class="table_box" :id="chart_id" v-if="is_show_table">
       <tr>
         <th v-for="(e, i) in labers" :key="i" style="padding: 15px 10px">
           {{ e.label
@@ -37,7 +37,22 @@
         v-for="(item, index) in table_data"
         :key="index"
       >
-        <td v-for="(e, i) in labers" :key="i">
+        <td
+          v-for="(e, i) in labers"
+          :key="i"
+          :rowspan="
+            merge_fields && merge_fields.indexOf(e.key) > -1
+              ? merge_fields_fun(index, e.key, 'sss')
+              : 1
+          "
+          v-if="
+            merge_fields && merge_fields.indexOf(e.key) > -1
+              ? show_row_key[e.key]
+                ? show_row_key[e.key][index]
+                : false
+              : true
+          "
+        >
           <div v-if="e.key == 'distribute'">
             <div
               v-if="
@@ -135,9 +150,12 @@
 
 <script>
 export default {
-  props: ['table_data', 'labers', 'chart_id'],
+  props: ['table_data', 'labers', 'chart_id', 'merge_fields'],
   data() {
     return {
+      is_show_table: false,
+      show_row_key: {},
+      row_data_name: {},
       sort_field: null,
       sort_type: null,
     };
@@ -146,12 +164,68 @@ export default {
   components: {},
 
   computed: {},
-  created() {},
+  created() {
+    this.data_f();
+  },
   mounted() {
     // console.log(this.table_data);
+    // console.log(this.labers);
   },
 
   methods: {
+    data_f() {
+      this.is_show_table = false;
+      for (let d in this.merge_fields) {
+        for (let i in this.table_data) {
+          let s = 0;
+          if (this.show_row_key[this.merge_fields[d]]) {
+            s = this.merge_fields_fun(i, this.merge_fields[d]);
+            this.show_row_key[this.merge_fields[d]][i] = s ? true : false;
+          } else {
+            let a = {};
+            let s = this.merge_fields_fun(i, this.merge_fields[d]);
+            a[i] = s ? true : false;
+            this.show_row_key[this.merge_fields[d]] = a;
+          }
+          i += s;
+        }
+      }
+      this.row_data_name = {};
+      console.log(this.show_row_key);
+      this.is_show_table = true;
+      // setTimeout((), 300)/;
+    },
+    merge_fields_fun(index, key, a = false) {
+      let num = 0;
+      if (!a) {
+        console.log(index);
+        console.log(key);
+        console.log(this.table_data[index][key]);
+      }
+      if (
+        !this.row_data_name[key] ||
+        (this.row_data_name[key] &&
+          this.row_data_name[key] != this.table_data[index][key])
+      ) {
+        this.row_data_name[key] = this.table_data[index][key];
+        for (let mf_i in this.table_data) {
+          if (mf_i >= index) {
+            if (this.table_data[index][key] == this.table_data[mf_i][key]) {
+              num += 1;
+            } else {
+              if (!a) {
+                // console.log(num);
+              }
+              return num;
+            }
+          }
+        }
+      }
+      if (!a) {
+        // console.log(num);
+      }
+      return num;
+    },
     sort(col, type = 'desc') {
       this.sort_field = col;
       this.sort_type = type;

src/components/AnalyseModule/index.vue

@@ -40,6 +40,7 @@
     <div class="content_container" v-if="original_data.type == 'table'">
       <Table
         v-if="original_data"
+        :merge_fields="original_data.merge_fields"
         :table_data="original_data.list"
         :chart_id="original_data.chart_id"
         :labers="original_data.labers"