Vue+Element 实现订单列表【管理端】01

效果：

实现：

<template>
  <div>
    <el-table :data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableNewData: [],
      hoverOrderArr: [],
      OrderIndexArr: [],
      tableData: [
        {
          id: '12987122',
          name: '订单1',
          amount1: '1',
          amount2: '1',
          amount3: 10,
          list: [
            {
              amount1: 10,
              amount2: 18652147845,
              name: '商品1',
              amount3: '061'
            },
            {
              amount1: 10,
              amount2: 18652147845,
              name: '商品1',
              amount3: '061'
            },
            {
              amount1: 10,
              amount2: 18652147845,
              name: '商品1',
              amount3: '061'
            }
          ]
        },
        {
          id: '12987123',
          name: '订单2',
          amount1: '2',
          amount2: '2',
          amount3: 10,
          list: [
            {
              amount1: 10,
              amount2: 18652147845,
              name: '商品2',
              amount3: '062'
            }
          ]
        },
        {
          id: '12987124',
          name: '订单3',
          amount1: '3',
          amount2: '3',
          amount3: 10,
          list: [
            {
              amount1: 10,
              amount2: 18632147845,
              name: '商品3',
              amount3: '063'
            }
          ]
        },
        {
          id: '12987125',
          name: '订单4',
          amount1: '4',
          amount2: '4',
          amount3: 10,
          list: [
            {
              amount1: 10,
              amount2: 18652147845,
              name: '商品41',
              amount3: '064'
            },
            {
              amount1: 10,
              amount2: 18652147845,
              name: '商品41',
              amount3: '064'
            }
          ]
        },
        {
          id: '12987126',
          name: '订单5',
          amount1: '5',
          amount2: '5',
          amount3: 10,
          list: [
            {
              amount1: 13,
              amount2: 18652144345,
              name: '商品45',
              amount3: '065'
            }
          ]
        }
      ]
    }
  },

  methods: {
    // 获取相同编号的数组
    getOrderNumber() {
      let OrderObj = {}
      this.tableNewData.forEach((element, index) => {
        element.rowIndex = index
        if (OrderObj[element.id]) {
          OrderObj[element.id].push(index)
        } else {
          OrderObj[element.id] = []
          OrderObj[element.id].push(index)
        }
      })
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k])
        }
      }
      console.log(this.OrderIndexArr, 'OrderIndexArr')
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    },

    tableRowClassName({ row, rowIndex }) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return 'hovered-row'
        }
      }
    },
    getNewTableData() {
      this.tableData.map((res) => {
        if (res.list.length == 1) {
          res.list.map((item) => {
            item.id = res.id
          })
        } else {
          res.list.map((item) => {
            item.id = res.id
          })
        }
        this.tableNewData.push(res.list)
      })
      this.tableNewData = this.tableNewData.flat()
      console.log('获取的数据', this.tableNewData)
    }
  },
  mounted() {
    this.getNewTableData()
    this.getOrderNumber()
  }
}
</script>

<style lang="scss" scoped>
.el-table--border,
.el-table--group {
  border: 1px solid #000;

  td {
    border-right: 1px solid #000;
  }
}

.el-table__row {
  border: 1px solid #000;
}

.el-table__row td,
.el-table--border th {
  border: 1px solid #000;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #ebeef5;
}
</style>

原文链接：https://blog.csdn.net/qq_39966730/article/details/105142858