使用element-ui實(shí)現(xiàn)行合并過程
更新時(shí)間：2022年08月01日 09:37:50 作者：小白變怪獸
這篇文章主要介紹了使用element-ui實(shí)現(xiàn)行合并過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-ui實(shí)現(xiàn)行合并過程
目標(biāo)樣式：
首先先來看下我們拿到的返回?cái)?shù)據(jù)：
tableData: [
{
productType: "紡織品",
price: 123,
productName: '男裝上衣',
amount: 20,
operate_number: "20180831142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "紡織品",
price: 123,
productName: '男裝褲子',
amount: 20,
operate_number: "20180831142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "飲料",
price: 123,
productName: '康師傅冰紅茶',
amount: 20,
operate_number: "20180823142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "紡織品",
price: 223,
productName: '男裝褲子',
amount: 10,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小王"
},{
productType: "綢緞",
price: 888,
productName: '旗袍',
amount: 200,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "綢緞",
price: 123,
productName: '席子',
amount: 20,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},
]
我們需要將返回的數(shù)據(jù)按照該字段（operate_number）進(jìn)行處理。—— 將相同operate_number的信息的索引進(jìn)行對(duì)應(yīng)存儲(chǔ)。
getOrderNumber() {
let OrderObj = {}
this.tableData.forEach((element, index) => {
element.rowIndex = index
if (OrderObj[element.operate_number]) {
OrderObj[element.operate_number].push(index)
} else {
OrderObj[element.operate_number] = []
OrderObj[element.operate_number].push(index)
}
})
// 將數(shù)組長(zhǎng)度大于1的值 存儲(chǔ)到this.OrderIndexArr（也就是需要合并的項(xiàng)）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k])
}
}
},
然后根據(jù)我們頁面展示需要， 控制哪一些列上的數(shù)據(jù)是需要進(jìn)行展示的。
// 合并單元格
objectSpanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i]
for (let j = 0; j < element.length; j++) {
let item = element[j]
if (rowIndex == item) {
if (j == 0) {
return {
rowspan: element.length,
colspan: 1
}
} else if (j != 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
},
經(jīng)過上述操作之后我們就能成功的繪制出如圖所需要的效果了。##完整代碼后面附上##
存在問題
不過這樣的話會(huì)存在一個(gè)顯示問題。就是當(dāng)我們的鼠標(biāo)滑過的時(shí)候，顯示效果不佳，如下圖所示：
?
合并后的一行數(shù)據(jù)，滑過的時(shí)候效果就不對(duì)了，接下來我們就來解決一下這個(gè)問題，讓效果能達(dá)到如下圖所示：
?
關(guān)鍵詞##: cell-mouse-enter cell-mouse-leave cell-class-name
通過觸發(fā)鼠標(biāo)劃入，劃出的時(shí)候單元格的樣式：
// 單元格樣式
tableRowClassName({row,rowIndex}) {
let arr = this.hoverOrderArr
for (let i = 0; i < arr.length; i++) {
if (rowIndex == arr[i]) {
return 'hovered-row'
}
}
},
// 鼠標(biāo)劃入，劃出效果
cellMouseEnter(row, column, cell, event) {
this.rowIndex = row.rowIndex;
this.hoverOrderArr = [];
this.OrderIndexArr.forEach(element => {
if (element.indexOf(this.rowIndex) >= 0) {
this.hoverOrderArr = element
}
})
},
cellMouseLeave(row, column, cell, event) {
this.rowIndex = '-1'
this.hoverOrderArr = [];
}
附上完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>element-ui實(shí)現(xiàn)合并單元格效果</title>
<link rel="external nofollow" rel="stylesheet">
<style>
.el-table .hovered-row {
background: #f5f7fa;
}
</style>
</head>
<body>
<div id="app">
<el-table ref="multipleTable" border :span-method="objectSpanMethod" :cell-class-name="tableRowClassName"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :data="tableData" style="width: 80%;margin:0 auto;">
<el-table-column label="商品類別" align="center">
<template slot-scope="scope" width="160">
<div>{{scope.row.productType}}</div>
</template>
</el-table-column>
<el-table-column label="商品價(jià)格" align="center">
<template slot-scope="scope">
<p>{{scope.row.price}}</p>
</template>
</el-table-column>
<el-table-column label="商品名稱" width="180px" align="center">
<template slot-scope="scope">
<p>{{scope.row.productName}}</p>
</template>
</el-table-column>
<el-table-column label="操作人員" align="center">
<template slot-scope="scope">
<p>{{scope.row.operator}}</p>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="更新時(shí)間" align="center">
</el-table-column>
</el-table>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
tableData: [
{
productType: "紡織品",
price: 123,
productName: '男裝上衣',
amount: 20,
operate_number: "20180831142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "紡織品",
price: 123,
productName: '男裝褲子',
amount: 20,
operate_number: "20180831142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "飲料",
price: 123,
productName: '康師傅冰紅茶',
amount: 20,
operate_number: "20180823142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "紡織品",
price: 223,
productName: '男裝褲子',
amount: 10,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小王"
},{
productType: "綢緞",
price: 888,
productName: '旗袍',
amount: 200,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},{
productType: "綢緞",
price: 123,
productName: '席子',
amount: 20,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吳"
},
],
rowIndex: '-1',
OrderIndexArr: [],
hoverOrderArr: []
},
mounted() {
this.getOrderNumber()
},
methods: {
// 獲取相同編號(hào)的數(shù)組
getOrderNumber() {
let OrderObj = {}
this.tableData.forEach((element, index) => {
element.rowIndex = index
if (OrderObj[element.operate_number]) {
OrderObj[element.operate_number].push(index)
} else {
OrderObj[element.operate_number] = []
OrderObj[element.operate_number].push(index)
}
})
// 將數(shù)組長(zhǎng)度大于1的值 存儲(chǔ)到this.OrderIndexArr（也就是需要合并的項(xiàng)）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k])
}
}
},
// 合并單元格
objectSpanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i]
for (let j = 0; j < element.length; j++) {
let item = element[j]
if (rowIndex == item) {
if (j == 0) {
return {
rowspan: element.length,
colspan: 1
}
} else if (j != 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
},
tableRowClassName({row,rowIndex}) {
let arr = this.hoverOrderArr
for (let i = 0; i < arr.length; i++) {
if (rowIndex == arr[i]) {
return 'hovered-row'
}
}
},
cellMouseEnter(row, column, cell, event) {
this.rowIndex = row.rowIndex;
this.hoverOrderArr = [];
this.OrderIndexArr.forEach(element => {
if (element.indexOf(this.rowIndex) >= 0) {
this.hoverOrderArr = element
}
})
},
cellMouseLeave(row, column, cell, event) {
this.rowIndex = '-1'
this.hoverOrderArr = [];
}
}
})
</script>
</html>
element-ui合并單元格行處理方法
在平時(shí)開發(fā)過程中經(jīng)常涉及到行、列單元格的合并，本文記錄LZ使用方式，只涉及到行的合并（場(chǎng)景較多），列也可同理而得
獲取合并規(guī)則
/**
* 合并單元格
* @param tableData table數(shù)據(jù) []
* @param spans 待合并 property
* eg:[{key:'country'},{key:'year',rely:'country'}], rely表依賴，是否依賴前置列
* @returns {{}}
*/
getMergeSpan(tableData,spans){
let rowMerge = {},obj = {}
for(let i = 0;i<spans.length;i++){
let property = spans[i].key
let rely = spans[i].rely
let total = 1 , start = 0
tableData.forEach((item,index)=>{
let nextRow = tableData[index+1] || {}
let isComRely = rely ? item[rely] === nextRow[rely] : true
if(item[property] === nextRow[property] && isComRely){
total ++
}else{
obj[start] = total
start = index + 1
total = 1
}
})
rowMerge[property] = obj
obj = {}
}
return rowMerge
},elemen-ui span-method 合并方式
/**
* element-ui 合并方法
* @param row 行 數(shù)據(jù)
* @param column 列信息
* @param rowIndex 行號(hào)
* @param columnIndex 列號(hào)
* @returns {(*|number)[]|number[]}
*/
tableMergeMethod({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0){ //tip: 列位置 須根據(jù)el-table-column獲取
let total = this.tableMerge['country'][rowIndex]
if(total){
return [total,1]
}else {
return [0,0]
}
}
if(columnIndex === 1){
let total = this.tableMerge['year'][rowIndex] // tableMerge：通過getMergeSpan獲取的規(guī)則
if(total){
return [total,1]
}else {
return [0,0]
}
}
},eg:
this.tableMerge = getMergeSpan(this.tableData,[{key:'country'},{key:'year',rely:'country'}])合并效果
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue-element組件實(shí)現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂播放器功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
本文主要介紹了vue usePop彈窗控制器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
對(duì)vue中methods互相調(diào)用的方法詳解
今天小編就為大家分享一篇對(duì)vue中methods互相調(diào)用的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中引入路徑@的用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中Axios配置不同的baseURL,請(qǐng)求不同的域名接口方式
這篇文章主要介紹了Vue中Axios配置不同的baseURL,請(qǐng)求不同的域名接口方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了在Vuex中Mutations修改狀態(tài)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了前端Vue中常用rules校驗(yàn)規(guī)則詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vant自定義引入iconfont圖標(biāo)及字體的方法步驟
因?yàn)関antUI給的圖標(biāo)非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來向vant添加自己自定義的圖標(biāo),對(duì)于自定義圖標(biāo)我第一時(shí)間想到的就是阿里的iconfont矢量圖庫,這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標(biāo)及字體的方法步驟,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01