export const tableTh = (dataLength, monthnum, el) => {
//th配置字典
  returnData = [
    {
      keyId: "13",
      tableColumns: [
 
        {
          title: "工业增加值增速",
          align: "center",
          children: [
            {
              title: "地  区",
              key: "region",
              align: "left"
            },
            {
              title: "累计(%)",
              fatherTitle: "工业增加值增速",
              unit: "%",
              key: "added_lj",
              field: "added_lj",
              align: "right",
              render: (h, params) => {
                return h(
                  "div",
                  {
                    on: {
                      click: () => {
                        if (params.row["added_lj"]) {
                          el.getColumnMethod(params, changeYearMonth, el);
                        }
                      }
                    }
                  },
                // 所要展示内容
                  params.row["added_lj"]
                    ? parseFloat(params.row["added_lj"]).toFixed(1)
                    : "-"
                );
              }
            },
          ]
        },
      ]
    },
  ];
  return returnData;
};

使用页面引用方式

methods: {
  getColumnMethod(params, changeYearMonth, el) {}
}
//调用
import {
  tableTh,
  addedkey12Formdata,
  addedkey14Formdata,
} from "@/utils/monthdatatableth";

this.tableColumns = tableTh(reslength, self.monthnum, self)
          .filter(item => item.keyId === self.keyId)
          .map(item => item.tableColumns)[0];
//vue  
<DateList @yearmodel="yearmodel" @monthmodel="monthmodel"></DateList>
<TableDataview
            v-show="docUrltype === 'excel'"
            :table-columns="tableColumns"
            :table-data="tableData"
            :table-type="keyId"
          ></TableDataview>

组件使用

<!--   选择器 --->
<template>
  <div class="datelist">
    <div>
      <label>
        <Select
          v-model="yearmodel"
          class="selectstyle"
          @on-change="initMonth()"
        >
          <Option
            v-for="(item, key) in yearList"
            :value="item.label"
            :key="key"
            >{{ item.label }}</Option
          >
        </Select>
      </label>
    </div>
    <div
      class="monthblock"
      :class="monthmodel === item.idx ? 'activemonth' : ''"
      v-for="(item, key) in monthList"
      :key="key"
      @click="changeMonth(item.idx)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: "DateList",
  data() {
    return {
      yearList: [],
      yearmodel: "",
      monthList: [],
      monthmodel: ""
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      this.yearList = [];
      let nowyear = new Date().getFullYear();
      for (let i = 0; i <= 4; i++) {
        if (nowyear - i > 2015) {
          this.yearList.push({
            label: nowyear - i
          });
        }
      }
      this.yearmodel = nowyear;
      this.initMonth("init");
    },
    initMonth(operation) {
      operation = operation || "";
      let monthli;
      this.monthList = [];
      let nowmonth = new Date().getMonth() + 1;
      let nowyear = new Date().getFullYear();
      this.$emit("yearmodel", this.yearmodel, "init");
      if (this.yearmodel === nowyear) {
        monthli = nowmonth;
        this.changeMonth(nowmonth, operation);
      } else {
        monthli = 12;
        this.changeMonth(12, operation);
      }
      for (let i = 1; i <= monthli; i++) {
        if (i !== 1) {
          this.monthList.push({
            idx: i,
            label: i + "月"
          });
        }
      }
    },
    changeMonth(idx, operation) {
      operation = operation || "";
      this.monthmodel = idx;
      this.$emit("monthmodel", this.monthmodel, operation);
    }
  }
};
</script>

<!--    table 组件    --->
<template>
  <div class="content">
    <NoneData v-if="!tableData.length"></NoneData>
    <div v-else style="height: 550px;overflow: auto">
      <vue-scroll style="width: calc(100% - 20px)">
        <Table
          :columns="tableColumns"
          :data="tableData"
          :row-class-name="rowClassName"
          class="contentbox"
          :span-method="handleSpan"
          height="550"
        ></Table>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
import NoneData from "@/components/none-data/none-data";
export default {
  name: "TableDataview",
  components: {
    NoneData
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    tableType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      currency: ""
    };
  },
  watch: {
    tableData() {
      let _this = this;
      if (_this.tableType === "14") {
        setTimeout(() => {
          if (_this.$("table").length) {
            _this.$("table")[0].tHead.children[0].children[0].rowSpan = 2;
            _this.$("table")[0].tHead.children[1].children[0].remove();
          }
        }, 50);
      }
    }
  },
  methods: {
    rowClassName(row) {
    //根据列名选择哪一行可以点击  
      if (this.tableType === "13") {
        if (row.region === "全国") {
          return "demo-table-info-row";
        } else if (row.region === "陕西") {
          return "demo-table-one-row";
        } else if (row.salesRegion === "陕西") {
          return "demo-table-two-row";
        }
      } else {
        if (row.region === "合计") {
          return "demo-table-info-row";
        } else if (row.region === "全国合计") {
          return "demo-table-info-row";
        } else if (row.region === "全国") {
          return "demo-table-info-row";
        } else if (row.region === "陕西") {
          return "demo-table-info-row";
        } else if (row.name === "分类" && row.INDUSTRY === "总计") {
          return "demo-table-info-row";
        }
        return "";
      }
    },
    handleSpan({ rowIndex, columnIndex }) {
      //根据table表头的数目判断是否合并单元格
      this.currency = this.tableColumns;
      if (this.tableType === "14") {
        if (rowIndex === 0 && columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 1 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else if (rowIndex > 1 && rowIndex <= 4 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 5 && columnIndex === 0) {
          return {
            rowspan: 8,
            colspan: 1
          };
        } else if (rowIndex > 5 && rowIndex <= 12 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 13 && columnIndex === 0) {
          return {
            rowspan: 9,
            colspan: 1
          };
        } else if (rowIndex > 13 && rowIndex <= 21 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 22 && columnIndex === 0) {
          return {
            rowspan: 14,
            colspan: 1
          };
        } else if (rowIndex > 22 && rowIndex <= 35 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 37 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else if (rowIndex > 37 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else if (this.tableType === "15") {
        if (rowIndex === 0 && columnIndex === 0) {
          return {
            rowspan: 10,
            colspan: 1
          };
        } else if (rowIndex > 0 && rowIndex <= 9 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 11 && columnIndex === 0) {
          return {
            rowspan: 8,
            colspan: 1
          };
        } else if (rowIndex > 11 && rowIndex <= 18 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 19 && columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex > 19 && rowIndex <= 20 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 21 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else if (rowIndex > 21 && rowIndex <= 24 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 25 && columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex > 25 && rowIndex <= 26 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 27 && columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex > 27 && rowIndex <= 28 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 29 && columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex > 29 && rowIndex <= 30 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 31 && columnIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else if (rowIndex > 31 && rowIndex <= 33 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 34 && columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex > 34 && rowIndex <= 35 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 36 && columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 37 && columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.content {
  text-align: left;
  padding: 20px;
  font-size: 14px;
}
/deep/ .demo-table-info-row td {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
/deep/ .contentbox tr td:first-child {
  background: #1b2a4c !important;
  cursor: default;
}

/deep/ .demo-table-one-row td:nth-child(2) {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
/deep/ .demo-table-one-row td:nth-child(3) {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
/deep/ .demo-table-one-row td:nth-child(4) {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
/deep/ .demo-table-two-row td:nth-child(5) {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
/deep/ .demo-table-two-row td:nth-child(6) {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
/deep/ .demo-table-two-row td:nth-child(7) {
  background-color: #477fff;
  color: #fff;
  cursor: pointer;
}
</style>