[JavaScript知识库]vue+element表头&行合并

效果图

• 优化合并表头循环（推荐）

• span-method：合并行或列的计算方法

• <template>
      <div>
          <!-- 表 -->
          <el-table
              :data="tableData"
              border
              ref="ref-table"
              :height="tableHeight"
              size="mini"
              :span-method="objectSpanMethod"
          >
              <!-- 不合并表头 -->
              <template  v-for="(value, key) in tableHeader">
                  <el-table-column
                      v-if="!combineKeys.includes(key)"
                      align="center"
                      :key="key"
                      :prop="key"
                      :label="value"
                  >
                      <!-- 表头操作 -->
                      <template slot="header" v-if="key === 'name'">
                          <!-- 添加提示 -->
                          <el-tooltip
                              class="item"
                              effect="light"
                              placement="top"
                          >
                              <span
                                  slot="content"
                              >
                                  提示啦
                              </span>
                              <span>
                                  {{value}}
                                  <i class="el-icon-question"></i>
                              </span>
                          </el-tooltip>
                      </template>
                  </el-table-column>
              </template>
              <!-- 合并表头 -->
              <template v-for="item in combineHeader">
                  <el-table-column
                      align="center"
                      :key="item.title"
                      :prop="item.title"
                      :label="item.title"
                  >
                      <el-table-column
                          v-for="(n) in item.column"
                          :key="n.field"
                          :prop="n.field"
                          :label="n.title"
                          align="center"
                      >
                      </el-table-column>
                  </el-table-column>
              </template>
          </el-table>
      </div>
  </template>
  
  <script>
  export default {
      name: 'RecordPageDetail',
      data() {
          return {
              tableHeight: 'auto', // 表高度
              tableData: [
                  { first_name: '韩', last_name: '信', add: '12-11', num: '小明', name: '测试', sort: '8' },
                  { first_name: '韩', last_name: '信', add: '12-11', num: '小李', name: '测试', sort: '8' },
                  { first_name: '韩', last_name: '信', add: '12-12', num: '小红', name: '测试', sort: '8' },
                  { first_name: '韩', last_name: '信', add: '12-12', num: '小波', name: '测试', sort: '8' }
              ], // 表
              tableHeader: {
                  add: '日期',
                  num: '审核人',
                  first_name: '姓',
                  last_name: '名',
                  sort: '数量1',
                  name: '名字'
              }, // 表头
              combineHeader: [{
                  title: '姓名',
                  column: [{field: 'first_name', title: '姓' }, { field: 'last_name', title: '名' }]
              }, {
                  title: '年龄',
                  column: [{ field: 'sort', title: '排序' }, { field: 'name', title: '名字' }]
              }], // 合并表头
              combineKeys: ['first_name', 'last_name', 'name', 'sort'] // 合并的key值
          };
      },
      methods: {
          // 合并行
          objectSpanMethod({ rowIndex, columnIndex }) {
              const keyMap = this.formatRowspanAndColspan(this.tableData, 'add');
              if (columnIndex === 0) {
                  return {
                      rowspan: keyMap[rowIndex],
                      colspan: 1
                  };
              }
          },
          // 通过传入的key计算
          formatRowspanAndColspan(tableData, key) {
              const basic = [];
              const computedMap = {};
              tableData.forEach(t => basic.push(t[key])); // 拿到需要的这一列的所有数据
              basic.forEach(t => {
                  computedMap[t] = computedMap[t] ? computedMap[t] + 1 : 1;
              }); // 计算出每种数据需要的个数
              return Object.values(computedMap).reduce((result, current) => {
                  return [...result, current, ...[...new Array(current - 1)].map(() => 0)];
              }, []);
          }
      }
  };
  </script>