vue中table表頭單元格合并(附單行、多級(jí)表頭代碼)
問(wèn)題描述
本文記錄el-table
表頭合并的多種情況,并提出對(duì)應(yīng)解決方案,估計(jì)能幫到部分道友
原生table知識(shí)點(diǎn)復(fù)習(xí)
- 我們知道:一個(gè)簡(jiǎn)單的
table
表格一般由一個(gè)或多個(gè)tr
、th
或td
標(biāo)簽組成(嵌套) tr
標(biāo)簽定義表格行(table-row
即為tr
)th
標(biāo)簽定義表頭(table-header
即為th
)td
標(biāo)簽定義表格單元格
再?gòu)?fù)雜的表格還包括
caption
、col
、colgroup
、thead
、tfoot
、tbody
等標(biāo)簽,這里暫不延伸
而合并單元格主要使用的是colspan
和rouspan
屬性,即為可設(shè)置橫跨列
和橫跨行
的值
而合并單元格主要使用的是colspan
和rouspan
屬性,即為可設(shè)置橫跨列
和橫跨行
的值
而合并單元格主要使用的是colspan
和rouspan
屬性,即為可設(shè)置橫跨列
和橫跨行
的值
知道這兩個(gè)屬性以后,我們結(jié)合一個(gè)具體demo來(lái)看,就很好的理解了
原生表格demo
假設(shè)我們需要做一個(gè)周一到周末的表格,記錄一下工作內(nèi)容,如下效果圖:
對(duì)應(yīng)代碼是這樣的:
<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>
但是,我們想把五個(gè)工作日和兩個(gè)周末進(jìn)行合并一下,這樣看起來(lái)更加優(yōu)雅一些,如下需求
由圖示,我們知道第一行的工作日一共有5個(gè),我們先
把后4個(gè)工作日隱去使其消失,再
讓第一個(gè)工作日橫跨5個(gè)單元格寬度,即橫跨5列(原本默認(rèn)都是橫跨1列)
先隱去后四個(gè)工作日單元格
<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>
變成這樣的效果了
- 這樣的話,我們只需要,再讓第一個(gè)工作日單元格寬度變寬一些,占據(jù)五個(gè)單元格,這樣的話,寬度有了,就把兩個(gè)周末擠回到原來(lái)正常的位置了
- 那,如何讓第一個(gè)工作日單元格,占據(jù)五個(gè)單元格的寬度呢?
- 或者說(shuō),如何讓一個(gè)單元格橫跨5列?
- 很簡(jiǎn)單:
<th colspan="5">工作日</th>
即可 rowspan
同理,不贅述
需求完成效果圖:
對(duì)應(yīng)需求完成代碼:
<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>
所以,通過(guò)上面的demo,我們可以得出一個(gè)結(jié)論:
合并單元格規(guī)律結(jié)論
合并單元格需要 先隱藏相關(guān)單元格,再讓某個(gè)單元格橫向或豎向延伸寬度或高度合并單元格需要 先隱藏相關(guān)單元格,再讓某個(gè)單元格橫跨列,或豎跨行
最后我們審查一下dom
元素,發(fā)現(xiàn)還真是這樣的
el-table單層表頭合并案例
無(wú)論是餓了么UI還是Iview等相關(guān)的UI組件庫(kù),都是給原生table套殼子封裝
的,所以若是需要合并相應(yīng)單元格,我們依舊可以使用上述的思想方式
我們繼續(xù)通過(guò)案例來(lái)看一下,在UI組件庫(kù)中如何操作合并單元格
本文以表頭單元格合并舉例,若是有表體單元格合并的需求,可以看之前的這篇文章:http://www.dbjr.com.cn/article/281738.htm
案例一
效果圖:
代碼:
header-cell-style
函數(shù)用于給表頭添加樣式,其返回的值會(huì)被添加到表頭對(duì)應(yīng)樣式中去
注意函數(shù)的形參中的column.id
為單元格的class
類
大家最好打印一下,結(jié)合審查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="愛(ài)好" 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: "取西經(jīng)", }, ], }; }, methods: { headerCellStyle({ row, column, rowIndex, columnIndex }) { // 第一步:設(shè)置表頭的第0列暫不操作,將地1列和第2列隱去使其消失 if ((columnIndex == 1) | (columnIndex == 2)) { return { display: "none" }; } // 第二步, 由于1、2列沒(méi)有了,后續(xù)列就會(huì)貼上來(lái)(后續(xù)列往左錯(cuò)位問(wèn)題) if ((rowIndex == 0) & (columnIndex == 0)) { // 解決后續(xù)列錯(cuò)位問(wèn)題,就是將隱去的第1、2列的位置再補(bǔ)上,通過(guò)第0列來(lái)補(bǔ) this.$nextTick(() => { // 原來(lái)第0列只占據(jù)一個(gè)位置,現(xiàn)在要去占據(jù)三個(gè)位置。即占據(jù)三列,即設(shè)置為橫向三個(gè)單元格 document.querySelector(`.${column.id}`).setAttribute("colspan", "3"); // 這里的column.id實(shí)際是dom元素的class,故用點(diǎn).不用井#,可審查dom驗(yàn)證 // 通過(guò)設(shè)置原生的colspan屬性,讓原來(lái)的第一列只占據(jù)一個(gè)單元格的表頭占據(jù)3個(gè)單元格即可 }); } }, }, }; </script> <style lang="less"> .el-table { th { font-weight: bold; color: #333; } } </style>
看,基本上一樣的用法:先隱藏再設(shè)置橫跨豎跨單元格
colspan='number' 屬性,設(shè)置單元格可以橫跨幾列(默認(rèn)一個(gè)單元格橫向只占據(jù)一列)
案例二
效果圖:
代碼:
headerCellStyle({ row, column, rowIndex, columnIndex }) { // 第一步:隱去第2列單元格 if (columnIndex == 2) { return { display: "none" }; } // 第二步,讓第1列單元格橫跨兩列(默認(rèn)單元格只是橫跨一列) 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列單元格橫跨兩列(默認(rèn)單元格只是橫跨一列) 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列單元格橫跨四列(默認(rèn)單元格只是橫跨一列) if ((rowIndex == 0) & (columnIndex == 0)) { this.$nextTick(() => { document.querySelector(`.${column.id}`).setAttribute("colspan", "4"); }); } },
el-table多級(jí)表頭合并案例
- 多級(jí)表頭,需要進(jìn)一步通過(guò)
rowIndex
去找到對(duì)應(yīng)的單元格 - 因?yàn)閱螌颖眍^,表頭只有1行,
rowIndex
肯定是0,所以寫不寫都無(wú)所謂 - 但是多級(jí)表頭有不少行,所以需要使用
columnIndex,rowIndex
進(jìn)一步定位單元格 - 類似于通過(guò)
X軸 Y軸
的坐標(biāo)定位到某個(gè)單元格位置
案例五
效果圖:
代碼:
html部門需要el-table-column標(biāo)簽進(jìn)行嵌套
<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="三列基礎(chǔ)信息" 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="愛(ài)好" width="150" align="center" ></el-table-column> </el-table> </template>
js部分繼續(xù)先隱藏再延伸相關(guān)單元格
headerCellStyle({ row, column, rowIndex, columnIndex }) { // 把第1列第1行和第2列第1行的單元格隱去 if ((columnIndex == 1) | (columnIndex == 2)) { if (rowIndex == 1) { // 加上rowIndex精準(zhǔn)定位 return { display: "none" }; } } // 然后讓第0列第1行的單元格橫向占據(jù)3個(gè)單元格位置填充剛剛隱去導(dǎo)致的空白 if ((columnIndex == 0) & (rowIndex == 1)) { // 加上rowIndex精準(zhǔn)定位 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="法號(hào)" align="center"> </el-table-column> <el-table-column prop="hobby" label="愛(ài)好&性格" 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: "勇敢堅(jiān)韌、疾惡如仇", bornBackground: "仙石孕育而生", skill: "72變、筋斗云", }, { name: "豬八戒", age: 88, home: "高老莊", kind: "pig", nickname: "凈壇使者", hobby: "吃包子", personality: "好吃懶做、貪圖女色", bornBackground: "天蓬元帥錯(cuò)投豬胎", skill: "36變", }, { name: "沙和尚", age: 1000, home: "通天河", kind: "human", nickname: "金身羅漢", hobby: "游泳", personality: "憨厚老實(shí)、任勞任怨", bornBackground: "卷簾大將被貶下界", skill: "18變", }, { name: "唐僧", age: 99999, home: "東土大唐", kind: "human", nickname: "檀功德佛", hobby: "取西經(jīng)", personality: "謙恭儒雅、愚善固執(zhí)", bornBackground: "金蟬子轉(zhuǎn)世", skill: "念緊箍咒", }, ], }; }, methods: { headerCellStyle({ row, column, rowIndex, columnIndex }) { /** * 合并:基本信息(姓名、年齡、家鄉(xiāng))單元格【通過(guò)行與列的索引來(lái)合并】 * */ 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行的單元格橫向延伸,補(bǔ)上剛剛隱去的單元格位置,并上個(gè)色 this.$nextTick(() => { document.querySelector(`.${column.id}`).setAttribute("colspan", "3"); }); return { background: "pink" }; } /** * 合并:重要信息--->公開重要信息--->愛(ài)好性格單元格 【通過(guò)單元格的文字內(nèi)容來(lái)合并】 * */ if (column.label == "性格") { return { display: "none" }; } if (column.label == "愛(ài)好&性格") { this.$nextTick(() => { document.querySelector(`.${column.id}`).setAttribute("colspan", "2"); }); return { background: "orange" }; // 不加這個(gè)也行,加了只是為了更好區(qū)分 } /** * 重要!重要!重要! * 我們想要合并表頭的單元格,需要先找到對(duì)應(yīng)單元格 * 可以通過(guò)列column對(duì)象的label或者行與列索引來(lái)找到,找到以后進(jìn)行隱藏或合并 * 也可以遍歷行row數(shù)組找,不過(guò)會(huì)麻煩一些,個(gè)人建議通過(guò)column來(lái)找 * */ // 通過(guò)column找 if (column.label == "技能") { return { background: "#baf" }; } // 通過(guò)row找 for (const item of row) { if (item.label == "重要信息") { this.$nextTick(() => { document.querySelector(`.${item.id}`).style.background = "#ea66a6"; }); break; } } }, }, }; </script>
還可以,直接通過(guò)column.label找到對(duì)應(yīng)單元格,然后進(jìn)行合并單元格操作,不使用rowIndex和columnIndex了
這種方式,在某些情況下,會(huì)更加方便
但無(wú)論哪種方式,本質(zhì)思路都是先找到單元格,再進(jìn)行合并相關(guān)操作
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 == "愛(ài)好&性格") { this.$nextTick(() => { document.querySelector(`.${column.id}`).setAttribute("colspan", "2"); }); return { background: "orange" }; } },
總結(jié)
到此這篇關(guān)于vue中table表頭單元格合并(附單行、多級(jí)表頭代碼)的文章就介紹到這了,更多相關(guān)vue table表頭單元格合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue2和vue3如何定義響應(yīng)式數(shù)據(jù)
這篇文章主要是來(lái)和大家一起討論一下vue2和vue3是如何定義響應(yīng)式數(shù)據(jù)的,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-11-11使用FileReader API創(chuàng)建Vue文件閱讀器組件
這篇文章主要介紹了使用FileReader API創(chuàng)建一個(gè)Vue的文件閱讀器組件,需要的朋友可以參考下2018-04-04vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問(wèn)題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無(wú)法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無(wú)法勾選問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03ElementUI嵌套頁(yè)面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例
本文主要介紹了ElementUI嵌套頁(yè)面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法
這篇文章主要介紹了Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12vue計(jì)算屬性computed方法內(nèi)傳參方式
這篇文章主要介紹了vue計(jì)算屬性computed方法內(nèi)傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10解決element ui select下拉框不回顯數(shù)據(jù)問(wèn)題的解決
這篇文章主要介紹了解決element ui select下拉框不回顯數(shù)據(jù)問(wèn)題的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02