element-ui table 合并单元格--合并行和列
1.合并单元格
<template>
<div>
<div class="preview app-container" ref="preview">
<el-table :data="tableData" height="500" :header-cell-style="handerMethod" :span-method="objectSpanMethod" border fit highlight-current-row style="margin-top: 10px;" :cell-class-name="tableRowClassName"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter">
<el-table-column prop='firstRisk' label='一级风险' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='secRisk' label='二级风险' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='' label='预警指标' align="center" :show-overflow-tooltip="true">
<el-table-column label="" prop='earlyWarning' align="center">
</el-table-column>
<el-table-column label="" align="center" prop="type"></el-table-column>
</el-table-column>
<el-table-column prop='description' label='期末' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='季度' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='同比增减率' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='备注' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='说明' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='ISstatus' label='是否为风险' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='环比增减率' align="center" :show-overflow-tooltip="true"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "preview",
components: {},
props: [""],
data() {
return {
tableData: [
{
firstRisk: "战略风险",
secRisk: "宏观经济风险",
earlyWarning: "国内外宏观经济",
type: "国内外宏观经济",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "政策风险",
earlyWarning: "国家及行业",
type: "国家及行业",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning:
"受关税政策影响的子企业数量(个)",
type: "受关税政策影响的子企业数量(个)",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外中高风险地区境外资产总额",
type: "金额(万元)",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外中高风险地区境外资产总额",
type: "占比总额比重",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "项目逾期数量(个)",
type: "项目逾期数量(个)",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外重大法律诉讼案件",
type: "数量(个)",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外重大法律诉讼案件",
type: "涉案金额(万元)",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "科技创新风险",
earlyWarning: "科研投入",
type: "金额(万元)",
description: "-",
ISstatus: "是",
},
{
firstRisk: "战略风险",
secRisk: "科技创新风险",
earlyWarning: "科研投入",
type: "占总收入比重",
description: "-",
ISstatus: "是",
},
],
oneNameArr: [],
oneNamePos: 0,
twoNameArr: [],
twoNamePos: 0,
threeNameArr: [],
threeNamePos: 0,
};
},
computed: {},
watch: {
test: {
deep: true,
handler(newV) {
this.test = newV;
},
},
},
created() {},
mounted() {
this.merage();
},
methods: {
handerMethod({ rowIndex }) {
if (rowIndex === 1) {
return { display: "none" };
} else {
return { background: "rgb(242, 242, 242)" };
}
},
merageInit() {
this.oneNameArr = [];
this.oneNamePos = 0;
this.twoNameArr = [];
this.twoNamePos = 0;
this.threeNameArr = [];
this.threeNamePos = 0;
},
merage() {
this.merageInit();
for (let i = 0; i < this.tableData.length; i += 1) {
if (i === 0) {
this.oneNameArr.push(1);
this.oneNamePos = 0;
this.twoNameArr.push(1);
this.twoNamePos = 0;
this.threeNameArr.push(1);
this.threeNamePos = 0;
} else {
if (this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk) {
this.oneNameArr[this.oneNamePos] += 1;
this.oneNameArr.push(0);
} else {
this.oneNameArr.push(1);
this.oneNamePos = i;
}
if (
this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
) {
this.twoNameArr[this.twoNamePos] += 1;
this.twoNameArr.push(0);
} else {
this.twoNameArr.push(1);
this.twoNamePos = i;
}
if (
this.tableData[i].earlyWarning ===
this.tableData[i - 1].earlyWarning &&
this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
) {
this.threeNameArr[this.threeNamePos] += 1;
this.threeNameArr.push(0);
} else {
this.threeNameArr.push(1);
this.threeNamePos = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
console.log("dsagvds", row, column, rowIndex, columnIndex);
if (columnIndex === 0) {
const row1 = this.oneNameArr[rowIndex];
const col1 = row1 > 0 ? 1 : 0;
return {
rowspan: row1,
colspan: col1,
};
} else if (columnIndex === 1) {
const row2 = this.twoNameArr[rowIndex];
const col2 = row2 > 0 ? 1 : 0;
return {
rowspan: row2,
colspan: col2,
};
} else if (columnIndex === 2) {
const row3 = this.threeNameArr[rowIndex];
const col3 = row3 > 0 ? 1 : 0;
if (row3 == 1) {
return {
rowspan: 1,
colspan: 2,
};
} else {
return {
rowspan: row3,
colspan: col3,
};
}
}else if (columnIndex === 3) {
const row3 = this.threeNameArr[rowIndex];
if (row3 == 1) {
return {
rowspan: 0,
colspan: 0,
};
}
}
else if (columnIndex === 9) {
const row2 = this.twoNameArr[rowIndex];
const col2 = row2 > 0 ? 1 : 0;
return {
rowspan: row2,
colspan: col2,
};
}
},
},
};
</script>
<style lang='scss' scoped>
.preview {
background: #fff;
margin: 3px;
padding: 20px;
}
</style>
2.鼠标经过事件
:cell-class-name="tableRowClassName"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter"
rowIndex: '-1',
OrderIndexArr: [],
hoverOrderArr: [],
mounted() {
this.merage();
this.getOrderNumber()
},
getOrderNumber() {
this.OrderIndexArr=[]
let OrderObj = {}
this.tableData.forEach((item, index) => {
item.rowIndex = index
if (OrderObj[item.firstRisk]) {
OrderObj[item.firstRisk].push(index)
} else {
OrderObj[item.firstRisk] = []
OrderObj[item.firstRisk].push(index)
}
})
console.log('this.tableData',this.tableData,OrderObj);
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k])
}
}
console.log('this.OrderIndexArr',this.OrderIndexArr);
},
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) {
console.log("row.rowIndex",row.rowIndex);
this.rowIndex = row.rowIndex;
this.hoverOrderArr = [];
this.OrderIndexArr.forEach((item,index) => {
if (item.indexOf(this.rowIndex) >= 0) {
this.hoverOrderArr = item
}
})
},
cellMouseLeave(row, column, cell, event) {
this.rowIndex = '-1'
this.hoverOrderArr = [];
},
<style lang='scss' scoped>
::v-deep .el-table .hovered-row {
background: #f5f7fa;
}
</style>
3.完整代码,多加-根据状态显示部分颜色框
<template>
<div>
<div class="preview app-container" ref="preview">
<el-table :data="tableData" height="500" :header-cell-style="handerMethod" :span-method="objectSpanMethod" border fit :highlight-current-row="false" style="margin-top: 10px;border-collapse:collapse;" :cell-style="cellStyle">
<el-table-column prop='firstRisk' label='一级' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='secRisk' label='二级' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='' label='预警' align="center" :show-overflow-tooltip="true" cell-class-name="rowClassNameEarlyWarning">
<el-table-column label="" prop='earlyWarning' align="center">
</el-table-column>
<el-table-column label="" align="center" prop="type"></el-table-column>
</el-table-column>
<el-table-column prop='description' label='期末' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-if="scope.row.state == '1'" v-model="scope.row.description"></el-input>
<span v-else>{{scope.row.description}}</span>
</template>
</el-table-column>
<el-table-column prop='status' label='季度' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
<span v-else>{{scope.row.status}}</span>
</template>
</el-table-column>
<el-table-column prop='status' label='增减率' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
<span v-else>{{scope.row.status}}</span>
</template>
</el-table-column>
<el-table-column prop='status' label='备注' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
<span v-else>{{scope.row.status}}</span>
</template>
</el-table-column>
<el-table-column prop='status' label='说明' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
<span v-else>{{scope.row.status}}</span>
</template>
</el-table-column>
<el-table-column prop='ISstatus' label='是否为风险' align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='环比' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
<span v-else>{{scope.row.status}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "preview",
components: {},
props: [""],
data() {
return {
titleTable: "2021年度中央企业风险分类监测指标体系",
ruleForm: {},
ruleFormRules: {},
tableData: [
{
firstRisk: "战略风险",
secRisk: "宏观经济风险",
earlyWarning: "国内外宏观经济",
type: "国内外宏观经济",
description: "-",
ISstatus: "是",
state: 0,
},
{
firstRisk: "战略风险",
secRisk: "政策风险",
earlyWarning: "国家及行业",
type: "国家及行业",
description: "-",
ISstatus: "是",
state: 0,
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "受关税政策影响的子企业数量(个)",
type: "受关税政策影响的子企业数量(个)",
description: "-",
ISstatus: "是",
state: 1,
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外中高风险地区境外资产总额",
type: "金额(万元)",
description: "-",
ISstatus: "是",
state: 1,
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外中高风险地区境外资产总额",
type: "占比总额比重",
description: "-",
ISstatus: "是",
state: 0,
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "项目逾期数量(个)",
type: "项目逾期数量(个)",
description: "-",
ISstatus: "是",
state: 0,
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外重大法律诉讼案件",
type: "数量(个)",
description: "-",
ISstatus: "是",
state: 1,
},
{
firstRisk: "战略风险",
secRisk: "国际化经营风险",
earlyWarning: "境外重大法律诉讼案件",
type: "涉案金额(万元)",
description: "-",
ISstatus: "是",
state: 0,
},
{
firstRisk: "战略风险",
secRisk: "科技创新风险",
earlyWarning: "科研投入",
type: "金额(万元)",
description: "-",
ISstatus: "是",
state: 1,
},
{
firstRisk: "战略风险",
secRisk: "科技创新风险",
earlyWarning: "科研投入",
type: "占总收入比重",
description: "-",
ISstatus: "是",
state: 0,
},
],
oneNameArr: [],
oneNamePos: 0,
twoNameArr: [],
twoNamePos: 0,
threeNameArr: [],
threeNamePos: 0,
OrderIndexArr: [],
};
},
computed: {},
watch: {
test: {
deep: true,
handler(newV) {
this.test = newV;
},
},
},
created() {},
mounted() {
this.merage();
this.getOrderNumber();
},
methods: {
handerMethod({ rowIndex }) {
if (rowIndex === 1) {
return { display: "none" };
} else {
return { background: "#909399", color: "#fff" };
}
},
merageInit() {
this.oneNameArr = [];
this.oneNamePos = 0;
this.twoNameArr = [];
this.twoNamePos = 0;
this.threeNameArr = [];
this.threeNamePos = 0;
},
merage() {
this.merageInit();
for (let i = 0; i < this.tableData.length; i += 1) {
if (i === 0) {
this.oneNameArr.push(1);
this.oneNamePos = 0;
this.twoNameArr.push(1);
this.twoNamePos = 0;
this.threeNameArr.push(1);
this.threeNamePos = 0;
} else {
if (this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk) {
this.oneNameArr[this.oneNamePos] += 1;
this.oneNameArr.push(0);
} else {
this.oneNameArr.push(1);
this.oneNamePos = i;
}
console.log("this.oneNameArr", this.oneNameArr);
if (
this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
) {
this.twoNameArr[this.twoNamePos] += 1;
this.twoNameArr.push(0);
} else {
this.twoNameArr.push(1);
this.twoNamePos = i;
}
if (
this.tableData[i].earlyWarning ===
this.tableData[i - 1].earlyWarning &&
this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
) {
this.threeNameArr[this.threeNamePos] += 1;
this.threeNameArr.push(0);
} else {
this.threeNameArr.push(1);
this.threeNamePos = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const row1 = this.oneNameArr[rowIndex];
const col1 = row1 > 0 ? 1 : 0;
return {
rowspan: row1,
colspan: col1,
};
} else if (columnIndex === 1) {
const row2 = this.twoNameArr[rowIndex];
const col2 = row2 > 0 ? 1 : 0;
return {
rowspan: row2,
colspan: col2,
};
} else if (columnIndex === 2) {
const row3 = this.threeNameArr[rowIndex];
const col3 = row3 > 0 ? 1 : 0;
if (row3 == 1) {
return {
rowspan: 1,
colspan: 2,
};
} else {
return {
rowspan: row3,
colspan: col3,
};
}
} else if (columnIndex === 3) {
const row3 = this.threeNameArr[rowIndex];
if (row3 == 1) {
return {
rowspan: 0,
colspan: 0,
};
}
} else if (columnIndex === 9) {
const row2 = this.twoNameArr[rowIndex];
const col2 = row2 > 0 ? 1 : 0;
return {
rowspan: row2,
colspan: col2,
};
}
},
getOrderNumber() {
this.OrderIndexArr = [];
let OrderObj = {};
this.tableData.forEach((item, index) => {
item.rowIndex = index;
console.log("OrderObj[item.state]", OrderObj[item.state]);
if (OrderObj[item.state]) {
OrderObj[item.state].push(index);
} else {
OrderObj[item.state] = [];
OrderObj[item.state].push(index);
}
});
console.log("this.tableData", this.tableData, OrderObj);
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k]);
}
}
console.log("this.OrderIndexArr", this.OrderIndexArr);
},
cellStyle({ row, column, rowIndex, columnIndex }) {
if (row.state == 1 && columnIndex != 0 && columnIndex != 1) {
if (columnIndex != 2 && this.threeNameArr[rowIndex] != 1) {
if (columnIndex != 9 && columnIndex != 10) {
if (columnIndex != 3) {
if (rowIndex == this.tableData.length - 1) {
return " border:1px solid pink;border-bottom:2px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
} else {
return " border:1px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
}
} else if (rowIndex == this.tableData.length - 1) {
return "border:1px solid pink; border-bottom: 2px solid pink;border-right: 1px solid pink; padding:0px!important; height:40px!important";
} else {
return " border:1px solid pink;padding:0px!important; height:40px!important";
}
} else if (columnIndex == 9) {
return " border: 1px solid transparent;padding:0px!important; height:40px!important";
} else if (columnIndex == 10) {
return "border: 1px solid pink;border-right: 2px solid pink; padding:0px!important; height:40px!important";
}
} else if (this.threeNameArr[rowIndex] == 1) {
if (columnIndex != 9 && columnIndex != 10) {
if (columnIndex != 3 && columnIndex != 2) {
if (rowIndex == this.tableData.length - 1) {
return " border:1px solid pink;border-bottom:2px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
} else {
return " border:1px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
}
} else if (rowIndex == this.tableData.length - 1) {
return "border:1px solid pink; border-bottom: 2px solid pink;border-right: 1px solid pink; padding:0px!important; height:40px!important";
} else {
return " border:1px solid pink;padding:0px!important; height:40px!important";
}
} else if (columnIndex == 9) {
return " border: 1px solid transparent;padding:0px!important; height:40px!important";
} else if (columnIndex == 10) {
return "border: 1px solid pink;border-right: 2px solid pink; !important; padding:0px!important; height:40px!important";
}
}
}
},
},
};
</script>
<style>
.el-form-item__label {
font-weight: 400 !important;
}
::v-deep .el-table .rowClassNameEarlyWarning {
border-bottom: 11px solid green !important;
}
</style>
<style lang='scss' scoped>
.preview {
background: #fff;
margin: 3px;
padding: 20px;
}
::v-deep .el-date-editor .el-input__prefix {
display: none;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent !important;
}
::v-deep.el-table .el-input__inner {
border: 0px solid transparent;
padding: 0;
}
</style>