demo.png
<div id="app">
<el-table :data="tableData" border size="mini" :span-method="tableSpanMethod">
<el-table-column align="center" prop="category" label="行业类别"></el-table-column>
<el-table-column align="center" prop="type" label="业务类型"></el-table-column>
<el-table-column align="center" prop="field" label="产品领域"></el-table-column>
<el-table-column align="center" prop="project" label="产品型项目"></el-table-column>
<el-table-column align="center" prop="number" label="产品编号"></el-table-column>
<el-table-column align="center" prop="name" label="产品名称" width="300">
<template slot-scope="scope">
<el-tooltip effect="dark" :content="scope.row.name" placement="top-start">
<a href="javascript:;" class="productName">
{{ scope.row.name }}
</a>
</el-tooltip>
</template>
</el-table-column>
<el-table-column align="center" prop="manager" label="产品经理"></el-table-column>
<el-table-column align="center" prop="grade" label="重要等级"></el-table-column>
<el-table-column align="center" prop="isImportant" label="今年重点产品"></el-table-column>
<el-table-column align="center" prop="isNew" label="今年新产品"></el-table-column>
</el-table>
</div>
<script>
export default {
data(){
return {
tableData:[{
category:"不动产",
type:"一窗相关",
field:"软件开发",
project:"不动产一窗1",
number:"ABCDEFG",
name:"不动产在线登记服务平台【公众版】",
manager:"***",
grade:"高",
isImportant:"是",
isNew:"是"
},{
category:"保险业",
type:"一窗相关",
field:"软件开发",
project:"不动产一窗2",
number:"HIGKLMN",
name:"中国人寿保险服务平台",
manager:"***",
grade:"高",
isImportant:"否",
isNew:"否"
},{
category:"保险业",
type:"一窗相关",
field:"软件开发",
project:"不动产一窗2",
number:"OPQRST",
name:"中国平安保险服务平台",
manager:"***",
grade:"中",
isImportant:"否",
isNew:"是"
},{
category:"采矿",
type:"一窗相关",
field:"软件开发",
project:"不动产一窗4",
number:"UVWSYZ",
name:"山西煤矿生产信息管理平台",
manager:"***",
grade:"低",
isImportant:"是",
isNew:"是"
},{
category:"采矿",
type:"一窗相关1",
field:"软件开发",
project:"不动产一窗5",
number:"A1B2C3",
name:"黑龙江煤矿开采信息服务平台",
manager:"***",
grade:"低",
isImportant:"否",
isNew:"否"
},{
category:"采矿",
type:"一窗相关1",
field:"软件开发",
project:"不动产一窗6",
number:"D4E5F6",
name:"大同矿业管理平台",
manager:"***",
grade:"中",
isImportant:"否",
isNew:"否"
},{
category:"能源",
type:"一窗相关1",
field:"软件开发",
project:"不动产一窗7",
number:"H7I8G9",
name:"江苏华电能源信息服务管理平台",
manager:"***",
grade:"高",
isImportant:"是",
isNew:"是"
}]
}
},
mounted() {
},
created() {
},
methods:{
/**
* 合并行或列的计算方法
*/
tableSpanMethod({row, column, rowIndex, columnIndex}){
if(columnIndex == 0){
return {
rowspan: this.mergeRowsFirstColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property),
colspan: 1
};
}else if(columnIndex == 1){
return {
rowspan:this.mergeRowsSecondColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property) ,
colspan: 1
};
}else if(columnIndex == 2){
return {
rowspan:this.mergeRowsThirdColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property) ,
colspan: 1
};
}else if(columnIndex == 3){
return {
rowspan:this.mergeRowsFourthColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property) ,
colspan: 1
};
}
},
/**
* 表格单元格合并-----行
* @param {Object} value 当前单元格的值
* @param {Object} data 当前表格所有数据
* @param {Object} index 当前单元格的值所在 行 索引
* @param {Object} property 当前列的property
* @returns {number} 待合并单元格数量
*/
mergeRows(value, data, index, property) {
// 判断 当前行的该列数据 与 上一行的该列数据 是否相等
if (index !== 0 && value === data[index - 1][property]) {
// 返回 0 使表格被跨 行 的那个单元格不会渲染
return 0;
};
// 判断 当前行的该列数据 与 下一行的该列数据 是否相等
let rowSpan = 1;
for (let i = index + 1; i < data.length; i++) {
if (value !== data[i][property]) {
break;
};
rowSpan++;
};
return rowSpan;
},
mergeRowsSecondColumn(value, data, index, property) {
if (index !== 0 && value === data[index - 1][property] && data[index].category === data[index - 1].category) {
return 0;
};
let rowSpan = 1;
for (let i = index + 1; i < data.length; i++) {
if(value == data[i][property] && data[i].category == data[i - 1].category){
rowSpan++;
}else{
break;
}
};
return rowSpan;
},
mergeRowsThirdColumn(value, data, index, property) {
if (index !== 0 && value === data[index - 1][property] && data[index].type === data[index - 1].type && data[index].category === data[index - 1].category) {
return 0;
};
let rowSpan = 1;
for (let i = index + 1; i < data.length; i++) {
if(value == data[i][property] && data[i].type == data[i - 1].type && data[i].category == data[i - 1].category){
rowSpan++;
}else{
break;
}
};
return rowSpan;
},
mergeRowsFourthColumn(value, data, index, property) {
if (index !== 0 && value === data[index - 1][property] && data[index].name === data[index - 1].name) {
return 0;
};
let rowSpan = 1;
for (let i = index + 1; i < data.length; i++) {
if(value == data[i][property] && data[i].name == data[i - 1].name){
rowSpan++;
}else{
break;
}
};
return rowSpan;
}
}
}
</script>
网友评论