icore-pass/src/views/appoint/components/saleContract/importExcelSaleOrder.vue

<template>
  <div>
    <el-table
      :data="tableData1"
      :span-method="objectSpanMethod"
      border
      highlight-current-row
    >
      <el-table-column
        property="receiveName"
        label="下单客户"
        width="200"
      ></el-table-column>
      <el-table-column property="truckNo" label="车序号"></el-table-column>
      <el-table-column
        property="materialName"
        label="物资名称"
      ></el-table-column>
      <el-table-column
        property="materialSpecification"
        label="物资规格"
      ></el-table-column>
      <el-table-column
        property="materialModel"
        label="物资型号"
      ></el-table-column>
      <el-table-column property="steelMeters" label="米数"></el-table-column>
      <el-table-column
        property="materialNumber"
        label="物资件数"
      ></el-table-column>
      <el-table-column property="province" label="省"></el-table-column>
      <el-table-column property="district" label="市"></el-table-column>
      <el-table-column property="town" label="县"></el-table-column>
      <el-table-column property="place" label="具体收货地址"></el-table-column>

      <el-table-column
        property="isSelfMention"
        label="是否自提"
        width="150"
      ></el-table-column>
      <el-table-column
        property="saleRemark"
        label="摘要"
        width="150"
      ></el-table-column>
      <el-table-column
        property="saleOrderReceiveCustomer"
        label="收款客户"
        width="150"
      ></el-table-column>
      <el-table-column
        property="truckRemark"
        label="车号备注"
      ></el-table-column>

      <el-table-column
        property="saleOrderConsigneeTel"
        label="收货方电话"
      ></el-table-column>
      <el-table-column
        property="saleDateOfReceipt"
        label="截止日期"
      ></el-table-column>

      <el-table-column
        property="isPoundSale"
        label="是否磅重交货"
      ></el-table-column>
      <el-table-column
        property="shipperName"
        label="发货单位"
        width="150"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ExcelSaleOrder",
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columnIndexList: [0, 1, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      spanArr: [],
      tableData1: this.tableData
    };
  },
  mounted() {
    this.getSpanArr(this.tableData1);
  },
  methods: {
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
          data[i].group = i;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].truckNo === data[i - 1].truckNo) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
            data[i].group = data[i - 1].group;
          } else {
            this.spanArr.push(1);
            this.pos = i;
            data[i].group = data[i - 1].group + 1;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.columnIndexList.indexOf(columnIndex) != -1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>