vue中table表頭單元格合并(附單行、多級表頭代碼)

更新時間：2023年04月20日 09:46:47 作者：水冗水孚

本文主要介紹了vue中table表頭單元格合并(附單行、多級表頭代碼)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

問題描述

本文記錄el-table表頭合并的多種情況，并提出對應解決方案，估計能幫到部分道友

原生table知識點復習

我們知道：一個簡單的table表格一般由一個或多個tr、th或td標簽組成（嵌套）
tr標簽定義表格行（table-row即為tr）
th標簽定義表頭（table-header即為th）
td標簽定義表格單元格

再復雜的表格還包括 caption、col、colgroup、thead、tfoot、tbody等標簽，這里暫不延伸

而合并單元格主要使用的是colspan和rouspan屬性，即為可設置橫跨列和橫跨行的值

知道這兩個屬性以后，我們結合一個具體demo來看，就很好的理解了

原生表格demo

假設我們需要做一個周一到周末的表格，記錄一下工作內容，如下效果圖：

對應代碼是這樣的：

<table border="1">
    <tr>
        <th>工作日</th>
        <th>工作日</th>
        <th>工作日</th>
        <th>工作日</th>
        <th>工作日</th>
        <th>周末</th>
        <th>周末</th>
    </tr>
    <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>
    <tr>
        <td>上班</td>
        <td>上班</td>
        <td>上班</td>
        <td>上班</td>
        <td>上班</td>
        <td>加班</td>
        <td>加班</td>
    </tr>
</table>

但是，我們想把五個工作日和兩個周末進行合并一下，這樣看起來更加優(yōu)雅一些，如下需求

由圖示，我們知道第一行的工作日一共有5個，我們先把后4個工作日隱去使其消失，再讓第一個工作日橫跨5個單元格寬度，即橫跨5列（原本默認都是橫跨1列）

先隱去后四個工作日單元格

<tr>
    <th>工作日</th>
    <th style="display: none;">工作日</th>
    <th style="display: none;">工作日</th>
    <th style="display: none;">工作日</th>
    <th style="display: none;">工作日</th>
    <th>周末</th>
    <th>周末</th>
</tr>

變成這樣的效果了

這樣的話，我們只需要，再讓第一個工作日單元格寬度變寬一些，占據(jù)五個單元格，這樣的話，寬度有了，就把兩個周末擠回到原來正常的位置了
那，如何讓第一個工作日單元格，占據(jù)五個單元格的寬度呢？
或者說，如何讓一個單元格橫跨5列？
很簡單：<th colspan="5">工作日</th>即可
rowspan同理，不贅述

需求完成效果圖：

對應需求完成代碼：

<table border="1">
    <tr>
        <th colspan="5">工作日</th>
        <th style="display: none;">工作日</th>
        <th style="display: none;">工作日</th>
        <th style="display: none;">工作日</th>
        <th style="display: none;">工作日</th>
        <th colspan="2">周末</th>
        <th style="display: none;">周末</th>
    </tr>
    <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>
    <tr>
        <td>上班</td>
        <td>上班</td>
        <td>上班</td>
        <td>上班</td>
        <td>上班</td>
        <td>加班</td>
        <td>加班</td>
    </tr>
</table>

所以，通過上面的demo，我們可以得出一個結論：

合并單元格規(guī)律結論

合并單元格需要先隱藏相關單元格，再讓某個單元格橫向或豎向延伸寬度或高度合并單元格需要先隱藏相關單元格，再讓某個單元格橫跨列，或豎跨行

最后我們審查一下dom元素，發(fā)現(xiàn)還真是這樣的

el-table單層表頭合并案例

無論是餓了么UI還是Iview等相關的UI組件庫，都是給原生table套殼子封裝的，所以若是需要合并相應單元格，我們依舊可以使用上述的思想方式

我們繼續(xù)通過案例來看一下，在UI組件庫中如何操作合并單元格

本文以表頭單元格合并舉例，若是有表體單元格合并的需求，可以看之前的這篇文章：http://www.dbjr.com.cn/article/281738.htm

案例一

效果圖：

代碼：

header-cell-style函數(shù)用于給表頭添加樣式，其返回的值會被添加到表頭對應樣式中去

注意函數(shù)的形參中的column.id為單元格的class類

大家最好打印一下，結合審查dom看類名

<template>
  <el-table
    :data="tableData"
    border
    style="width: 600"
    :header-cell-style="headerCellStyle"
  >
    <el-table-column
      prop="name"
      label="姓名、年齡、家鄉(xiāng)"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="age"
      label="年齡"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="home"
      label="家鄉(xiāng)"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="hobby"
      label="愛好"
      width="150"
      align="center"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "孫悟空",
          age: 500,
          home: "花果山水簾洞",
          hobby: "大鬧天宮",
        },
        {
          name: "豬八戒",
          age: 88,
          home: "高老莊",
          hobby: "吃包子",
        },
        {
          name: "沙和尚",
          age: 1000,
          home: "通天河",
          hobby: "游泳",
        },
        {
          name: "唐僧",
          age: 99999,
          home: "東土大唐",
          hobby: "取西經",
        },
      ],
    };
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // 第一步：設置表頭的第0列暫不操作，將地1列和第2列隱去使其消失
      if ((columnIndex == 1) | (columnIndex == 2)) {
        return { display: "none" };
      }
      // 第二步， 由于1、2列沒有了，后續(xù)列就會貼上來（后續(xù)列往左錯位問題）
      if ((rowIndex == 0) & (columnIndex == 0)) {
        // 解決后續(xù)列錯位問題，就是將隱去的第1、2列的位置再補上，通過第0列來補
        this.$nextTick(() => {
          // 原來第0列只占據(jù)一個位置，現(xiàn)在要去占據(jù)三個位置。即占據(jù)三列，即設置為橫向三個單元格
          document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
          // 這里的column.id實際是dom元素的class，故用點.不用井#，可審查dom驗證
          // 通過設置原生的colspan屬性，讓原來的第一列只占據(jù)一個單元格的表頭占據(jù)3個單元格即可
        });
      }
    },
  },
};
</script>

<style lang="less">
.el-table {
  th {
    font-weight: bold;
    color: #333;
  }
}
</style>

看，基本上一樣的用法：先隱藏再設置橫跨豎跨單元格

colspan='number' 屬性，設置單元格可以橫跨幾列（默認一個單元格橫向只占據(jù)一列）

案例二

效果圖：

代碼：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一步：隱去第2列單元格
  if (columnIndex == 2) {
    return { display: "none" };
  }
  // 第二步，讓第1列單元格橫跨兩列（默認單元格只是橫跨一列）
  if ((rowIndex == 0) & (columnIndex == 1)) {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
    });
  }
},

案例三

效果圖：

代碼：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一步：隱去第3列單元格
  if (columnIndex == 3) {
    return { display: "none" };
  }
  // 第二步，讓第2列單元格橫跨兩列（默認單元格只是橫跨一列）
  if ((rowIndex == 0) & (columnIndex == 2)) {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
    });
  }
},

案例四

效果圖：

代碼：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一步：隱去第1、2、3列單元格
  let hideColArr = [1, 2, 3];
  if (hideColArr.includes(columnIndex)) {
    return { display: "none" };
  }
  // 第二步，讓第0列單元格橫跨四列（默認單元格只是橫跨一列）
  if ((rowIndex == 0) & (columnIndex == 0)) {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "4");
    });
  }
},

el-table多級表頭合并案例

多級表頭，需要進一步通過rowIndex去找到對應的單元格
因為單層表頭，表頭只有1行，rowIndex肯定是0，所以寫不寫都無所謂
但是多級表頭有不少行，所以需要使用 columnIndex，rowIndex 進一步定位單元格
類似于通過X軸 Y軸的坐標定位到某個單元格位置

案例五

效果圖：

代碼：

html部門需要el-table-column標簽進行嵌套

<template>
  <el-table
    :data="tableData"
    border
    style="width: 600"
    :header-cell-style="headerCellStyle"
  >
    <el-table-column prop="name" label="姓名" width="150" align="center">
      <el-table-column
        prop="name"
        label="三列基礎信息"
        width="150"
        align="center"
      ></el-table-column>
    </el-table-column>
    <el-table-column prop="name" label="年齡" width="150" align="center">
      <el-table-column
        prop="age"
        label="年齡"
        width="150"
        align="center"
      ></el-table-column>
    </el-table-column>
    <el-table-column prop="name" label="家鄉(xiāng)" width="150" align="center">
      <el-table-column
        prop="home"
        label="家鄉(xiāng)"
        width="150"
        align="center"
      ></el-table-column>
    </el-table-column>
    <el-table-column
      prop="hobby"
      label="愛好"
      width="150"
      align="center"
    ></el-table-column>
  </el-table>
</template>

js部分繼續(xù)先隱藏再延伸相關單元格

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 把第1列第1行和第2列第1行的單元格隱去
  if ((columnIndex == 1) | (columnIndex == 2)) {
    if (rowIndex == 1) { // 加上rowIndex精準定位
      return { display: "none" };
    }
  }
  // 然后讓第0列第1行的單元格橫向占據(jù)3個單元格位置填充剛剛隱去導致的空白
  if ((columnIndex == 0) & (rowIndex == 1)) { // 加上rowIndex精準定位
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
    });
  }
},

案例六

效果圖：

代碼：

依舊是嵌套

<template>
  <el-table
    :data="tableData"
    border
    style="width: 600"
    :header-cell-style="headerCellStyle"
  >
    <el-table-column
      prop="name"
      label="基本信息（姓名、年齡、家鄉(xiāng)）"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="age"
      label="年齡"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="home"
      label="家鄉(xiāng)"
      align="center"
    >
    </el-table-column>
    <el-table-column prop="kind" label="所屬種族" align="center">
    </el-table-column>
    <el-table-column label="重要信息" align="center">
      <el-table-column label="公開重要信息" align="center">
        <el-table-column prop="nickname" label="法號" align="center">
        </el-table-column>
        <el-table-column prop="hobby" label="愛好&性格" align="center">
        </el-table-column>
        <el-table-column prop="personality" label="性格" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="保密重要信息" align="center">
        <el-table-column prop="bornBackground" label="出身背景" align="center">
        </el-table-column>
        <el-table-column prop="skill" label="技能" align="center">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<style lang="less">
.el-table {
  th {
    font-weight: bold;
    color: #333;
  }
}
</style>

先找到dom，再操作dom

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "孫悟空",
          age: 500,
          home: "花果山水簾洞",
          kind: "monkey",
          nickname: "斗戰(zhàn)勝佛",
          hobby: "大鬧天宮",
          personality: "勇敢堅韌、疾惡如仇",
          bornBackground: "仙石孕育而生",
          skill: "72變、筋斗云",
        },
        {
          name: "豬八戒",
          age: 88,
          home: "高老莊",
          kind: "pig",
          nickname: "凈壇使者",
          hobby: "吃包子",
          personality: "好吃懶做、貪圖女色",
          bornBackground: "天蓬元帥錯投豬胎",
          skill: "36變",
        },
        {
          name: "沙和尚",
          age: 1000,
          home: "通天河",
          kind: "human",
          nickname: "金身羅漢",
          hobby: "游泳",
          personality: "憨厚老實、任勞任怨",
          bornBackground: "卷簾大將被貶下界",
          skill: "18變",
        },
        {
          name: "唐僧",
          age: 99999,
          home: "東土大唐",
          kind: "human",
          nickname: "檀功德佛",
          hobby: "取西經",
          personality: "謙恭儒雅、愚善固執(zhí)",
          bornBackground: "金蟬子轉世",
          skill: "念緊箍咒",
        },
      ],
    };
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      /**
       * 合并：基本信息（姓名、年齡、家鄉(xiāng)）單元格【通過行與列的索引來合并】
       * */
      let colArr = [1, 2];
      if (colArr.includes(columnIndex)) {
        if (rowIndex == 0) {
          // 把第1列第0行和第2列第0行的單元格隱去
          return { display: "none" };
        }
      }
      if ((columnIndex == 0) & (rowIndex == 0)) {
        // 把第0列第0行的單元格橫向延伸，補上剛剛隱去的單元格位置，并上個色
        this.$nextTick(() => {
          document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
        });
        return { background: "pink" };
      }
      /**
       * 合并：重要信息--->公開重要信息--->愛好性格單元格 【通過單元格的文字內容來合并】
       * */
      if (column.label == "性格") {
        return { display: "none" };
      }
      if (column.label == "愛好&性格") {
        this.$nextTick(() => {
          document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
        });
        return { background: "orange" }; // 不加這個也行，加了只是為了更好區(qū)分
      }

      /**
       * 重要！重要！重要！
       *    我們想要合并表頭的單元格，需要先找到對應單元格
       *    可以通過列column對象的label或者行與列索引來找到，找到以后進行隱藏或合并
       *    也可以遍歷行row數(shù)組找，不過會麻煩一些，個人建議通過column來找
       * */
      // 通過column找
      if (column.label == "技能") {
        return { background: "#baf" };
      }
      // 通過row找
      for (const item of row) {
        if (item.label == "重要信息") {
          this.$nextTick(() => {
            document.querySelector(`.${item.id}`).style.background = "#ea66a6";
          });
          break;
        }
      }
    },
  },
};
</script>

還可以，直接通過column.label找到對應單元格，然后進行合并單元格操作，不使用rowIndex和columnIndex了

這種方式，在某些情況下，會更加方便

但無論哪種方式，本質思路都是先找到單元格，再進行合并相關操作

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一部分的合并
  if (column.label == "年齡") {
    return { display: "none" };
  }
  if (column.label == "家鄉(xiāng)") {
    return { display: "none" };
  }
  if (column.label == "基本信息（姓名、年齡、家鄉(xiāng)）") {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
    });
    return { background: "pink" };
  }
  // 第二部分的合并
  if (column.label == "性格") {
    return { display: "none" };
  }
  if (column.label == "愛好&性格") {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
    });
    return { background: "orange" };
  }
},

總結

到此這篇關于vue中table表頭單元格合并(附單行、多級表頭代碼)的文章就介紹到這了,更多相關vue table表頭單元格合并內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解vue2和vue3如何定義響應式數(shù)據(jù)
這篇文章主要是來和大家一起討論一下vue2和vue3是如何定義響應式數(shù)據(jù)的,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解下
2023-11-11
使用FileReader API創(chuàng)建Vue文件閱讀器組件
這篇文章主要介紹了使用FileReader API創(chuàng)建一個Vue的文件閱讀器組件,需要的朋友可以參考下
2018-04-04
vue中使用Cesium加載shp文件、wms服務、WMTS服務問題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務、WMTS服務問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue3中關于路由hash與History的設置
這篇文章主要介紹了vue3中關于路由hash與History的設置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
使用element組件table表格實現(xiàn)某條件下復選框無法勾選
這篇文章主要介紹了使用element組件table表格實現(xiàn)某條件下復選框無法勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解在vue3中使用jsx的配置以及一些小問題
本文主要介紹了在vue3中使用jsx的配置以及一些小問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
ElementUI嵌套頁面及關聯(lián)增刪查改實現(xiàn)示例
本文主要介紹了ElementUI嵌套頁面及關聯(lián)增刪查改實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
Vue3中進行頁面局部刷新組件刷新的操作方法
這篇文章主要介紹了Vue3中進行頁面局部刷新組件刷新的操作方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
vue計算屬性computed方法內傳參方式
這篇文章主要介紹了vue計算屬性computed方法內傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
解決element ui select下拉框不回顯數(shù)據(jù)問題的解決
這篇文章主要介紹了解決element ui select下拉框不回顯數(shù)據(jù)問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-02-02

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中table表頭單元格合并(附單行、多級表頭代碼)

目錄

問題描述

原生table知識點復習

原生表格demo

合并單元格規(guī)律結論

el-table單層表頭合并案例

案例一

案例二

案例三

案例四

el-table多級表頭合并案例

案例五

案例六

總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中table表頭單元格合并(附單行、多級表頭代碼)

目錄

問題描述

原生table知識點復習

原生表格demo

合并單元格規(guī)律結論

el-table單層表頭合并案例

案例一

案例二

案例三

案例四

el-table多級表頭合并案例

案例五

案例六

總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

vue中table表頭單元格合并(附單行、多級表頭代碼)