<template>
<el-table :data="data" border style="width:100%" :cell-style="cellStyle" :span-method="arraySpanMethod"
:header-cell-style="handerMethod">
<template v-for="(item, index) in header">
<el-table-column :label="item.text" :key="index" align="center">
<template #default="{ row }">
{{ row[index] }}
<div v-for="(item1, index1) in row.url" :key="index1">
<el-image v-if="index == index1 + 2 && !row[index]" :src="item1"></el-image>
</div>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
header: [
{ text: 'name' },
{ text: 'name' },
{ text: '200' },
{ text: '200' },
{ text: '300' },
{ text: '300' },
{ text: '300' },
{ text: '400' },
],
tableData: [
{
0: '张三',
1: '',
2: 'abc',
3: 'dcs',
4: 'dsa',
5: 'bgs',
6: 'ngh',
7: 'mhj'
},
{
0: '李四',
1: '',
2: '123',
3: '789',
4: 'bgs',
5: 'bgs',
6: 'ngh',
7: 'mhj'
},
{
0: '王五',
1: '',
2: '789',
3: '789',
4: '789',
5: 'bgs',
6: 'ngh',
7: 'mhj'
},
{
0: '赵六',
1: '小六',
2: '478',
3: '534',
4: 'bgs',
5: 'bgs',
6: 'bgs',
7: 'bgs'
},
{
0: '赵六',
1: '小七',
2: '098',
3: '560',
4: 'dsa',
5: '098',
6: '098',
7: '098'
},
{
0: '宋七',
1: '小八',
2: '309',
3: '309',
4: 'dsa',
5: '309',
6: '309',
7: '309'
},
{
0: '宋七',
1: '小九',
2: '610',
3: '208',
// 4: 'dsa',
// 5: 'bgs',
// 6: 'ngh',
// 7: 'mhj'
},
{
0: 'image',
1: 'test',
url: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg']
},
{
0: 'ima',
1: '',
url: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
}
],
data: []
}
},
created() {
this.caculateHeaderColSpan();
this.dealTableData(this.tableData)
},
methods: {
// 添加颜色
cellStyle({ row, column, rowIndex, columnIndex }) {
switch (rowIndex) {
case this.tableData.length - 3:
if (row[columnIndex] > 600) {
return 'backgroundColor:#CCFF00'
}
break;
case this.tableData.length - 4:
if (row[columnIndex] > 600) {
return 'backgroundColor:pink'
}
break;
}
},
// 处理数据,便于行合并
flitterData() {
let rowSpanArr = [];
let concatIndex = 1;
this.tableData.forEach((item, index) => {
if (index === 0) {
rowSpanArr.push(1);
} else {
if (item[0] === this.tableData[index - 1][0]) {
rowSpanArr[concatIndex] += 1;
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
concatIndex = index
}
}
});
return {
one: rowSpanArr
}
},
dealTableData(data) {
const twoArr = data.reduce((acc, obj) => {
const values = Object.values(obj);
const uniqueValues = values.reduce((acc, val, index, arr) => {
if (val !== arr[index - 1]) {
acc.push(val)
}
return acc
}, []);
acc.push(uniqueValues);
return acc;
}, []);
const result1 = twoArr.map((subArr) => {
const obj = {};
subArr.forEach((value, index) => {
if (typeof value === 'object' && !Array.isArray(value)) {
Object.assign(obj, value)
} else if (Array.isArray(value)) {
obj.url = value
}else{
obj[index]=value
}
})
return obj;
})
this.data = result1
console.log(this.data);
},
dealRowData(num) {
const result = this.tableData.map((obj) => Object.values(obj));
const newArr = [];
result.forEach(arr => newArr.push(arr));
for (let i = 0; i < newArr.length; i++) {
let subArr = newArr[num];
let countArr = [];
let count = 1;
for (let j = 1; j < subArr.length; j++) {
if (subArr[j] === subArr[j - 1]) {
count++
} else {
countArr.push(count);
count = 1
}
}
countArr.push(count)
return countArr
}
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并列
if (row[1] == '') {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
};
if (rowIndex == this.header.length) {
if (columnIndex === 2) {
return [1, 100]
}
}
// 合并行
if (columnIndex === 0) {
const _row = this.flitterData(this.tableData).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
}
}
// 合并单元格相同的内容
const merge = (num, columnIndex) => {
if (rowIndex == num) {
const _col = this.dealRowData(num)[columnIndex];
const _row = _col > 0 ? 1 : 0;
return [_row, _col]
}
};
if (rowIndex < this.tableData.length - 3) {
return merge(rowIndex, columnIndex)
}
if (rowIndex == this.tableData.length - 3) {
if (columnIndex>1) {
return [1,3]
}
}
},
// 表头初始化数据及合并表头计算
caculateHeaderColSpan() {
this.header.forEach((ele) => {
ele.colSpan = 1
})
for (let i = 0; i < this.header.length - 1; i++) {
for (let j = i + 1; j < this.header.length; j++) {
if (this.header[i].text === this.header[j].text) {
this.header[i].colSpan++;
this.header[j].colSpan = 0;
} else {
// 跳过已经重复的数据
i += this.header[i].colSpan - 1;
break;
}
// 循环到最后,停止循环
if (j === this.header.length - 1) {
i = j;
}
}
}
},
// 表头合并控制
handerMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
if (columnIndex >= 0) {
this.$nextTick(() => {
if (document.getElementsByClassName(column.id).length !== 0) {
document
.getElementsByClassName(column.id)[0]
.setAttribute('colSpan', this.header[columnIndex].colSpan);
}
});
// 被合并的列隐藏
if (this.header[columnIndex].colSpan === 0) {
return { display: 'none', textAlign: 'center' };
}
}
}
},
}
}
</script>
<style></style>
vue element-ui合并el-table表格
于 2023-06-15 23:09:08 首次发布
这段代码展示了如何在Vue.js中使用ElementUI的el-table组件来渲染表格数据,并进行单元格和行的合并。数据处理包括根据特定条件合并行和列,以及处理包含图片的数据。同时,代码还涉及到动态计算表头的合并。
摘要由CSDN通过智能技术生成