el-table单元格合并思路_el-table合并单元格

el-table单元格合并

el-table单元格合并的关键是el-table的span-method属性，本文将讲解一下我在单元格合并的思路，本人前端小白，可能有理解错误仅供参考，本文重点介绍思路，毕竟每个人需求不一样

注意：有时候不需要单元格合并，可以使用插槽

前提

单元格的合并必须得有数据，所以应该先准备好合并前的数据，在有数据的基础上做减法

• 合并前 – 每一行的数据都是双份的这样虽然数据变多了，但是给了我们操作行的空间
  

• 合并后 其中一行被合并就看不见了
  

• 分析 需要合并三个部分
  

表头合并

在el-table中嵌套使用el-table-column即可实现多级表头、列的数据放在最底层el-table-column

什么是最底层的column-table-column呢?

表头和数据结合应该是这样

<template>
  <div>
    <el-table :data="data" border>
      <!-- 第一列 -->
      <el-table-column label="进粉日期" prop="column1" align="center"></el-table-column>
      <!-- 第二列 -->
      <el-table-column label="广告费" prop="column2" align="center"></el-table-column>
      <!-- 第三列 -->
      <el-table-column label="线索数" prop="column3" align="center"></el-table-column>
      <!-- 第四列 第一层-->
      <el-table-column label="2022-12" align="center">
        <!-- 第四列第二层 -->
        <el-table-column label="发货总金额" align="center">
          <!-- 第四列第三层-1 -->
          <el-table-column label="单数" prop="column4" align="center"></el-table-column>
          <!-- 第四列第三层-2 -->
          <el-table-column label="线索单产" prop="column5" align="center"></el-table-column>
          <!-- 第四列第三层-3 -->
          <el-table-column label="广告会产率" prop="column6" align="center"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
  let data = ref([]);
    data.value = [
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
    ];
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

合并行

我们在上面代码的基础上对前三列进行行合并，偶数行是保留的行，奇数行将被隐藏

// el-table :span-method="spanMethods"
function spanMethods({ row, column, rowIndex, columnIndex }) {
  let _row = 0;
  let _col = 0;
  // 前三列
  if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
    if (rowIndex % 2 == 0) {
      _row = 2; // 偶数行 两行
      _col = 1;
    } else {
      _row = 0; // 奇数行 0行
      _col = 1;
    }
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

合并列

这里的列合并其实是将偶数行的第4列扩展、第5和6列合并

  // 第四列
  if (columnIndex == 3) {
    if (rowIndex % 2 == 0) {
      // 偶数行时
      _row = 1;
      _col = 3; // 跨三列
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  }
  // 第五、六列
  if (columnIndex == 4 || columnIndex == 5) {
    if (rowIndex % 2 == 0) {
      // 偶数行时
      _row = 1;
      _col = 0; // 跨0列
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

现在有一个问题，现在发货总金额和单数用的其实是一组数据，需要去表格模板中修改

<!-- 第四列第三层-1 -->
<el-table-column label="单数" prop="column4" align="center">
  <!-- 这里需要特殊处理 -->
  <template #default="scope">
    <!-- 偶数行 -->
    <span v-if="scope.$index % 2 == 0">{{ scope.row.column7 }}</span>
    <!-- 奇数行 -->
    <span v-else>{{ scope.row.column4 }}</span>
  </template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10

完整代码

<template>
  <div>
    <el-table :data="data" :span-method="spanMethods" border>
      <!-- 第一列 -->
      <el-table-column label="进粉日期" prop="column1" align="center"></el-table-column>
      <!-- 第二列 -->
      <el-table-column label="广告费" prop="column2" align="center"></el-table-column>
      <!-- 第三列 -->
      <el-table-column label="线索数" prop="column3" align="center"></el-table-column>
      <!-- 第四列 第一层-->
      <el-table-column label="2022-12" align="center">
        <!-- 第四列第二层 -->
        <el-table-column label="发货总金额" align="center">
          <!-- 第四列第三层-1 -->
          <el-table-column label="单数" prop="column4" align="center">
            <!-- 这里需要特殊处理 -->
            <template #default="scope">
              <!-- 偶数行 -->
              <span v-if="scope.$index % 2 == 0">{{ scope.row.column7 }}</span>
              <!-- 奇数行 -->
              <span v-else>{{ scope.row.column4 }}</span>
            </template>
          </el-table-column>
          <!-- 第四列第三层-2 -->
          <el-table-column label="线索单产" prop="column5" align="center"></el-table-column>
          <!-- 第四列第三层-3 -->
          <el-table-column label="广告会产率" prop="column6" align="center"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
  import {
    ref,
    reactive
  } from "vue";
  let data = ref([]);
    data.value = [
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
    ];

  function spanMethods({
    row,
    column,
    rowIndex,
    columnIndex
  }) {
    let _row = 0;
    let _col = 0;
    // 前三列
    if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
      if (rowIndex % 2 == 0) {
        _row = 2; // 偶数行 两行
        _col = 1;
      } else {
        _row = 0; // 奇数行 0行
        _col = 1;
      }
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
    // 第四列
    if (columnIndex == 3) {
      if (rowIndex % 2 == 0) {
        // 偶数行时
        _row = 1;
        _col = 3; // 跨三列
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
    // 第五、六列
    if (columnIndex == 4 || columnIndex == 5) {
      if (rowIndex % 2 == 0) {
        // 偶数行时
        _row = 1;
        _col = 0; // 跨0列
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
  }

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97