網(wǎng)站首頁 編程語言 正文
ElementUI:通過給table傳入span-method方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan,第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。
模板部分:
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column prop="date" align="center" label="時間日期" width="120"></el-table-column>
<el-table-column prop="time" label="單位" width="120"></el-table-column>
<el-table-column prop="unit" label=""></el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="數(shù)值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="數(shù)值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="數(shù)值 3(元)">
</el-table-column>
</el-table>
js 部分
data() {
return {
spanArr: [],
pos: 0
}
},
watch: {
tableData: {
handler () {
this.getSpanArr(this.tableData)
},
immediate: true
}
},
methods: {
// 根據(jù)條件合并隨意行數(shù),因為合并的行數(shù)可能是不固定的(傳入的data參數(shù)為從后臺數(shù)據(jù)數(shù)據(jù))
getSpanArr(data) {
this.spanArr = []
this.pos = 0
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一條記錄(即索引是0的時候),向數(shù)組中加入1
this.spanArr.push(1)
this.pos = 0
} else {
if (data[i].date === data[i - 1].date) {
// 如果date相等就累加,并且push 0 (這里的判斷視自己的判定依據(jù)改變)
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
// 不相等push 1
this.spanArr.push(1)
this.pos = i
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 用于設(shè)置要合并的列 0 表示第一列
if (columnIndex === 0) {
const cRow = this.spanArr[rowIndex]
const cCol = cRow > 0 ? 1 : 0
return {
rowspan: cRow, // 合并的行數(shù)
colspan: cCol // 合并的列數(shù),為0表示不顯示
}
}
}
}
原文鏈接:https://blog.csdn.net/qq_38157825/article/details/119211247
- 上一篇:沒有了
- 下一篇:沒有了
相關(guān)推薦
- 2022-06-07 ?分享一個Python?遇到數(shù)據(jù)庫超好用的模塊_python
- 2022-04-12 Redis?Server啟動過程的詳細步驟_Redis
- 2022-11-16 Android?十六進制狀態(tài)管理實例詳解_Android
- 2023-10-15 前端console.log打印內(nèi)容與后端請求返回數(shù)據(jù)不一致
- 2022-09-10 python中的隨機數(shù)種子seed()用法說明_python
- 2024-01-10 CloneNotSupportedException的解決方案 + Object的clone方法分析
- 2022-05-05 Python學習之流程控制與條件判斷總結(jié)_python
- 2022-11-16 Docker如何安全地停止和刪除容器_docker
- 欄目分類
-
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學習環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支