網站首頁 編程語言 正文
官網解析
先看看官網示例
<template>
<Table
:columns="columns"
:data="data"
border
:span-method="handleSpan"
></Table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: "Date",
key: "date",
},
{
title: "Name",
key: "name",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
},
],
data: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04",
},
],
};
},
methods: {
handleSpan({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 && columnIndex === 0) { // 表示的是第一行第一列
return [1, 2]; // 表示合并1行2列
} else if (rowIndex === 0 && columnIndex === 1) { // 表示的是第一行第二列
return [0, 0]; // 表示合并0行0列，即被合并的單元格（注意：被合并到單元格一定要返回[0,0]否則數據會亂套）
}
if (rowIndex === 2 && columnIndex === 0) { // 表示的是第三行第一列
return { // 表示合并2行1列
rowspan: 2,
colspan: 1,
};
} else if (rowIndex === 3 && columnIndex === 0) { // 表示的是第四行第一列
return { // 表示合并0行0列
rowspan: 0,
colspan: 0,
};
}
},
},
};
</script>
主要是設置 span-method屬性可以指定合并行或列的算法。
上面代碼示例是根據行號和列號來進行合并判斷的，現實情況我們很有可能需要動態判斷合并的單元格。
注意：在合并行時，需要合并到數據必須相鄰，數據在數組中的下標要緊挨這，否則無法合并。可以自己根據需要將數據排好序后再合并。
示例1：只根據某一列合并行
假設我們根據name值相同的合并單元格
效果圖：
代碼實現：
<template>
<Table
:columns="columns"
:data="data"
border
:span-method="handleSpan"
></Table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: "Date",
key: "date",
},
{
title: "Name",
key: "name",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
},
],
resData: [
{
id: "1",
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
id: "3",
name: "John Brown",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
id: "2",
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02",
},
{
id: "4",
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04",
},
],
data: [],
};
},
methods: {
handleSpan({ row, column, rowIndex, columnIndex }) {
//合并第二列,這里columnIndex===1 根據具體業務來，比如本示例中需要合并的name為第二列
if (columnIndex === 1) {
//計算合并的行數列數
let x = row.mergeCol === 0 ? 0 : row.mergeCol;
let y = row.mergeCol === 0 ? 0 : 1;
return [x, y];
}
},
formatData(data) {
let names = [];
//篩選出不重復的 name值,將其放到 names數組中
data.forEach((e) => {
if (!names.includes(e.name)) {
names.push(e.name);
}
});
let nameNums = [];
//將names數組中的 name值設置默認合并0個單元格,放到 nameNums中
names.forEach((e) => {
nameNums.push({ name: e, num: 0 });
});
//計算每種 name值所在行需要合并的單元格數
data.forEach((e) => {
nameNums.forEach((n) => {
if (e.name === n.name) {
n.num++;
}
});
});
//將計算后的合并單元格數整合到 data中
data.forEach((e) => {
nameNums.forEach((n) => {
if (e.name === n.name) {
if (names.includes(e.name)) {
e.mergeCol = n.num;
//刪除已經設置過的值(防止被合并的單元格進到這個 if 語句中)
names.splice(names.indexOf(n.name), 1);
} else {
//被合并的單元格設置為 0
e.mergeCol = 0;
}
}
});
});
//將整理后的數據交給表格渲染
return data;
},
},
mounted() {
this.data = this.formatData(this.resData);
},
};
</script>
示例2：先根據某一列合并行，再根據合并的行合并另一列中的行
什么意思，意思就是比如我先合并了name列中相同的行，如果name列已經合并的行中還有相同的age列需要合并的話，應該怎么做？
數據預處理：先排序，把相同的
name值放到一起，然后再把相同的age放到一起
效果圖：
代碼實現：
<template>
<Table
class="border-table"
:columns="columns"
:data="data"
border
:span-method="handleSpan"
></Table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: "Date",
key: "date",
},
{
title: "Name",
key: "name",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
},
],
resData: [
{
id: "1",
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
id: "3",
name: "John Brown",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
id: "5",
name: "John Brown",
age: 24,
address: "London No. 2 Lake Park",
date: "2016-10-03",
},
{
id: "2",
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02",
},
{
id: "4",
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04",
},
],
data: [],
};
},
methods: {
handleSpan({ row, column, rowIndex, columnIndex }) {
//合并第二列,這里columnIndex===1 根據具體業務來，比如本示例中需要合并的name為第二列
if (columnIndex === 1) {
//計算合并的行數列數
let x = row.mergeCol === 0 ? 0 : row.mergeCol;
let y = row.mergeCol === 0 ? 0 : 1;
return [x, y];
}
// age 合并
if (columnIndex === 2) {
//計算合并的行數列數
let x = row.mergeColAge === 0 ? 0 : row.mergeColAge;
let y = row.mergeColAge === 0 ? 0 : 1;
return [x, y];
}
},
formatData(data) {
// 根據 name 排序 age
for (let i = 0; i < data.length - 1; i++) {
for (let n = i + 1; n < data.length; n++) {
if (data[i].age > data[n].age) {
[data[i], data[n]] = [data[n], data[i]];
}
}
}
let names = [];
//篩選出不重復的 name值,將其放到 names數組中
data.forEach((e) => {
if (!names.includes(e.name)) {
names.push(e.name);
}
});
let nameNums = [];
//將names數組中的 name值設置默認合并0個單元格,放到 nameNums中
names.forEach((e) => {
nameNums.push({ name: e, num: 0 });
});
//計算每種 name值所在行需要合并的單元格數
data.forEach((e) => {
nameNums.forEach((n) => {
if (e.name === n.name) {
n.num++;
}
});
});
//將計算后的合并單元格數整合到 data中
data.forEach((e) => {
nameNums.forEach((n) => {
if (e.name === n.name) {
if (names.includes(e.name)) {
e.mergeCol = n.num;
//刪除已經設置過的值(防止被合并的單元格進到這個 if 語句中)
names.splice(names.indexOf(n.name), 1);
} else {
//被合并的單元格設置為 0
e.mergeCol = 0;
}
}
});
});
//不唯一且重復的情況下，在唯一的基礎上合并重復
for (let j = 0; j < data.length; j++) {
// > 1 name 表示 有合并需要在name合并的row中 再合并
if (data[j].mergeCol > 1) {
for (let k = 0; k < data[j].mergeCol; k++) {
//age合并
if (data[j + k].ageAlready !== 1) { // 需要這個條件，避免數據重復
if (k + 1 < data[j].mergeCol) {
data[j + k].mergeColAge = 1
for (let b = k + 1; b < data[j].mergeCol; b++) {
if (data[j + k].age === data[j + b].age) {
data[j + k].mergeColAge++;
data[j + b].mergeColAge = 0;
data[j + b].ageAlready = 1;
} else {
break;
}
}
}
}
}
}
// 如果有需要在age合并到row中 再合并的話代碼添加到此處
}
//將整理后的數據交給表格渲染
return data;
},
},
mounted() {
this.data = this.formatData(this.resData);
},
};
</script>
原文鏈接：https://blog.csdn.net/qq_38157825/article/details/125101981
- 上一篇：沒有了
- 下一篇：沒有了
相關推薦
- 2022-10-31 Python?NumPy創建數組方法_python
- 2022-08-16 Docker中部署Redis集群與部署微服務項目的詳細過程_docker
- 2022-05-18 基于python介紹pytorch保存和恢復參數_python
- 2022-09-17 Redis實現消息的發布訂閱原理分析_Redis
- 2022-11-10 Python+Selenium實現瀏覽器的控制操作_python
- 2022-09-03 Python流程控制if條件選擇與for循環_python
- 2023-05-30 python?snap7讀寫PLC的操作方法_python
- 2022-05-16 深入理解docker鏡像的分層(小白必看)_docker
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速