el-table表格合并行、合并列

<!--  -->
<template>
  <div class="max">
    <div class="header">熔炼任务报表</div>
    <div class="topSearch">
      <el-date-picker
        v-model="value2"
        type="month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        placeholder="选择月"
      >
      </el-date-picker>
    </div>
    <div class="table1">
      <div class="title">工序任务汇总</div>
      <el-table
        :data="tableData2"
        stripe
        size="mini"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="GXNAME" label="工序" width="180">
        </el-table-column>
        <el-table-column prop="code" label="牌号"> </el-table-column>
        <el-table-column prop="model" label="计划规格"> </el-table-column>
        <el-table-column prop="num2" label="计划数量(支)"> </el-table-column>
        <el-table-column prop="num1" label="计划重量(kg)"> </el-table-column>
        <el-table-column prop="NUM4" label="实际数量(支)"> </el-table-column>
        <el-table-column prop="NUM3" label="实际重量(kg)"> </el-table-column>
        <el-table-column prop="rate1" label="数量完成率%">
          <template slot-scope="scope"> {{ scope.row.rate1 }}% </template>
        </el-table-column>
        <el-table-column prop="rate2" label="重量完成率%">
          <template slot-scope="scope"> {{ scope.row.rate2 }}% </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="table1">
      <div class="title">熔炼工单明细</div>
      <div class="search">
        <el-form
          :inline="true"
          size="mini"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="炉号">
            <el-input
              v-model="formInline.TDCode"
              clearable
              placeholder="炉号"
            ></el-input>
          </el-form-item>
          <el-form-item label="牌号">
            <el-input
              v-model="formInline.PHCode"
              clearable
              placeholder="牌号"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户编号">
            <el-select
              v-model="formInline.Customer"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, val) in userList"
                :key="val"
                :label="item.Customer"
                :value="item.Customer"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择时间"> </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table stripe size="mini" :data="tableData" border style="width: 100%">
        <el-table-column prop="TDcode" label="炉号"> </el-table-column>
        <el-table-column prop="Code" label="牌号"> </el-table-column>
        <el-table-column prop="Spec" label="规格"> </el-table-column>
        <el-table-column prop="Customer" label="客户"> </el-table-column>
        <el-table-column prop="jhtime" label="交期">
          <template slot-scope="scope">
            {{ scope.row.jhtime.split(" ")[0] }}
          </template>
        </el-table-column>
        <el-table-column prop="TLWeight" label="投料重量"> </el-table-column>
        <el-table-column prop="Status" label="加急状态"> </el-table-column>
        <el-table-column prop="Status2" label="生产执行状态"> </el-table-column>
        <el-table-column prop="Process" label="当前工序"> </el-table-column>
        <el-table-column prop="StartTime" label="工序开始时间">
          <template slot-scope="scope">
            {{ scope.row.StartTime.split(" ")[0] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      spanArr: [],
      formInline: {
        TDCode: "",
        PHCode: "",
        Customer: "",
      },
      value2: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      userList: [],

      tableData2: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    value2() {
      this.getRltaskunion();
      this.getRlorderlist();
    },
  },
  //方法集合
  methods: {
    onSubmit() {
      this.getRlorderlist();
    },
    // groupBy 数组
    groupBy(data, params) {
      const groups = {};
      data.forEach((v) => {
        const group = JSON.stringify(v[params]);
        groups[group] = groups[group] || [];
        groups[group].push(v);
      });
      return Object.values(groups);
    },
    // 计算 数据合并 索引
    getSpanArr(data, params) {
      // 接收重构数组
      let arr = [];

      // 设置索引
      let pos = 0;

      // 控制合并的数组
      this.spanArr = [];

      // arr 处理
      this.groupBy(data, params).map((v) => (arr = arr.concat(v)));

      // this.tableData = arr
      arr.map((res) => {
        data.shift();
        data.push(res);
      });

      // spanArr 处理
      const redata = arr.map((v) => v[params]);
      redata.reduce((old, cur, i) => {
        if (i === 0) {
          this.spanArr.push(1);
          pos = 0;
        } else {
          if (cur === old) {
            this.spanArr[pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            pos = i;
          }
        }
        return cur;
      }, {});
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(_row, _col, this.spanArr);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    async getRltaskunion(item) {
      let params = `rlplandodetail@Time=${this.value2}`;
      let res = await this.$axios.get(
        `/api/Ajax/GetJson?sql=${encodeURIComponent(
          params
        )}&id=517dc8d8-d91a-45ed-9d21-57933a8d913f_p${this.$token}`
      );
      console.log(res);
      this.tableData2 = res;
      this.getSpanArr(this.tableData2, "GXNAME");
    },
    async getRlorderlist(item) {
      let params = `rlorderlist@Time=${this.value2}&TDCode=${this.formInline.TDCode}&PHCode=${this.formInline.PHCode}&Customer=${this.formInline.Customer}`;
      let res = await this.$axios.get(
        `/api/Ajax/GetJson?sql=${encodeURIComponent(
          params
        )}&id=517dc8d8-d91a-45ed-9d21-57933a8d913f_p${this.$token}`
      );
      this.tableData = res;
    },

    async getUserlist(item) {
      let params = `SELECTKHCODE@Time=${this.value2}`;
      let res = await this.$axios.get(
        `/api/Ajax/GetJson?sql=${encodeURIComponent(
          params
        )}&id=dd84a53f-0e6d-4b6c-bc8c-d81040d26737_p${this.$token}`
      );
      this.userList = res;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.value2 = [this.$getLastMonth().last, this.$getLastMonth().now];
    let day = this.$getLastMonth().now;
    let addZero = day.split("-")[1];

    if (day.split("-")[1] < 10) {
      addZero = "0" + day.split("-")[1];
    }
    let mouth = day.split("-")[0] + "-" + addZero;
    this.value2 = mouth;
    console.log(day, mouth);
    this.getUserlist();
    this.getRltaskunion();
    this.getRlorderlist();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss">
// table边框颜色
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #c0c4cc;
}

.el-table--border,
.el-table--group {
  border-color: #c0c4cc;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #c0c4cc;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
  border-bottom: 1px solid #c0c4cc;
}

.el-table--border td,
.el-table--border th {
  border-right: 1px solid #c0c4cc;
}
</style>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.max {
  padding: 40px;
  .header {
    height: 60px;
    line-height: 60px;
    font-size: 38px;
    text-align: center;
  }
  .topSearch {
    text-align: right;
  }
  .search {
    margin: 20px 0;
    text-align: center;
  }
  .table1 {
    .title {
      font-size: 26px;
      text-align: center;
      margin: 20px 0;
      font-weight: 500;
    }
  }
}
</style>