表格

合并单元格

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <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"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <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 {
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

同列数据合并

<template>
  <div class="hello1">
     <el-table
     :data="tableData"
     border
     :span-method="spanMethod"
     :cell-style="cellStyle"
     :header-cell-style="titleHeader"
     >
       <el-table-column v-for="(item,i) in titleData" :key='i' :prop="item.name" :label='item.label'></el-table-column>
     </el-table>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 所有要合并的数量（一行一行的开始）
      spanAll:[],
      titleData:[
        {
          name:'col1',
          label:'AAA'
        },
        {
          name:'col2',
          label:'BBB'
        },
        {
          name:'col3',
          label:'CCC'
        },
        {  
          name:'col4',
          label:'DDD'
        }
      ],
       tableData:[
         {
           col1:1,
           col2:2,
           col3:3,
           col4:4
         },
         {
           col1:2,
           col2:2,
           col3:4,
           col4:4
         },
         {
           col1:6,
           col2:2,
           col3:7,
           col4:5
         },
         {
           col1:5,
           col2:4,
           col3:7,
           col4:9
         },
       ]
    }
  },
  created() {
    this.titleData.forEach(val => {
      this.getSpanNum(val.name)
    })
  },
  methods:{
    // 单元格样式
    cellStyle({row, column, rowIndex, columnIndex}) {
      return 'text-align:center'
    },
    // 表头样式
    titleHeader({row, column, rowIndex, columnIndex}){
      return 'text-align:center'
    },
    spanMethod({row, column, rowIndex, columnIndex}) {
      // 得到行合并的数据
      const rowNum= this.spanAll[columnIndex][rowIndex]
      // 列合并
      const colNum = rowNum > 0 ? 1 : 0
      console.log(colNum, '44', rowNum)
      // 当前位置的行合并和列合并数据
      return {
        rowspan: rowNum,
        colspan: colNum
      }
    },
    getSpanNum(curName) {
      const data = this.tableData
      const spanArry = []
      let pos = 0
      data.forEach((val,i) => {
        if(i===0){
          spanArry.push(1)
          pos = 0
        } else {
          // 判断当前列数据与下一行的该列数据是否相同
          if (data[i][curName] === data[i-1][curName]) {
            // 每一列每一行的合并数量
            spanArry[pos] += 1
            spanArry.push(0)
          } else {
            spanArry.push(1)
            pos = i
          }
        }
      })
      // 把合并数据放入spanAll里面
      this.spanAll.push(spanArry)
    }
  }
}
</script>
<style>
 
</style>

提示

titleData:为列名，此列表必输，否则无法获取列数据