el-table 合并单元格
1.效果
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title>
<script src="./js/vue.js" type="text/javascript" charset="utf-8">script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
head>
<body>
<div id="app">
<el-table :data="tableData" border style="width: 100%;font-size: 12px;"
:header-cell-style="{background:'#F7F7F7'}" :span-method="objectSpanMethod">
<el-table-column prop="type" label="类别" width="35" align="center">
el-table-column>
<el-table-column prop="name" label="规模以上工业" width="100" align="left">
<template slot-scope="scope">
<span
:class="scope.row.name =='小计' || scope.row.name =='合计' ? 'font-class-red' : 'font-class-green'">
{{scope.row.name}}span>
template>
el-table-column>
<el-table-column prop="amount1" label="企业个数" width="70" align="center">
<template slot-scope="scope">
<span
:class="scope.row.name =='小计'|| scope.row.name =='合计' ? 'font-class-red' : 'font-class-green'">
{{scope.row.amount1}}span>
template>
el-table-column>
<el-table-column prop="amount2" label="产值(万元)" align="center" width="60">
<template slot-scope="scope">
<span
:class="scope.row.name =='小计'|| scope.row.name =='合计' ? 'font-class-red' : 'font-class-green'">
{{scope.row.amount2}}span>
template>
el-table-column>
<el-table-column prop="amount3" label="占规上工业比" align="center" width="80">
<template slot-scope="scope">
<span
:class="scope.row.name =='小计'|| scope.row.name =='合计' ? 'font-class-red' : 'font-class-green'">
{{scope.row.amount3}}span>
template>
el-table-column>
el-table>
div>
body>
<script>
var app = new Vue({
el: '#app',
created() {
// 把本地方法挂载到window中
window.getAndroidValue = this.getAndroidValue
},
data: {
spanArr: [], //用于存放每一行记录的合并数
msg: '',
token: '',
tableData: [{
id: '1',
type: '三特类',
name: '规模以上工业',
amount1: '349',
amount2: '838.3',
amount3: '100%'
},
{
id: '1',
type: '三特类',
name: '电子信息',
amount1: '349',
amount2: '838.3',
amount3: '100%'
},
{
id: '1',
type: '三特类',
name: '高端装备',
amount1: '349',
amount2: '838.3',
amount3: '100%'
},
{
id: '1',
type: '三特类',
name: '精密机械',
amount1: '349',
amount2: '838.3',
amount3: '100%'
},
{
id: '1',
type: '三特类',
name: '小计',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '2',
type: '四特类',
name: '集成电路',
amount1: '349',
amount2: '838.3',
amount3: '100%'
},
{
id: '2',
type: '四特类',
name: '生物医药与医疗器',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '2',
type: '四特类',
name: '光电信息显示',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '2',
type: '四特类',
name: '智能制造与人工智能',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '2',
type: '四特类',
name: '小计',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '3',
type: '其他类',
name: '高端纺织服装',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '3',
type: '其他类',
name: '其他产业',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '3',
type: '其他类',
name: '小计',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '4',
type: '非工业',
name: '规模以上服务业',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '4',
type: '非工业',
name: '限额以上批零业',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '4',
type: '非工业',
name: '限额以上住宿餐饮',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '4',
type: '非工业',
name: '有资质的建筑业',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '4',
type: '非工业',
name: '有资质的房地产业',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
{
id: '4',
type: '非工业',
name: '合计',
amount1: '349',
amount2: '838.8',
amount3: '100%'
},
]
},
mounted: function() {
this.getSpanArr(this.tableData);
},
methods: {
// 接收Android传过来的值方法
getAndroidValue(value) {
this.tableData = JSON.parse(value);
},
getSpanArr(data) {
// data就是我们从后台拿到的数据
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
console.log(this.spanArr);
}
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
// console.log(`rowspan:${_row} colspan:${_col}`);
return {
// [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col
};
}
}
},
})
script>
<style>
.font-class-red {
color: #EE5E25 !important;
}
.font-class-green {
color: #333 !important;
}
style>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title>
<script src="./js/vue.js" type="text/javascript" charset="utf-8">script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
head>
<body>
<div id="app">
<el-table :data="tableData" border style="width: 100%;font-size: 12px;"
:header-cell-style="{background:'#F7F7F7'}" :span-method="objectSpanMethod" @row-click="clickData">
<el-table-column prop="type" label="专业类别" width="35" align="center">
el-table-column>
<el-table-column prop="name" label="专业类别" width="120" align="center">
el-table-column>
<el-table-column prop="amount1" label="企业个数" width="50" align="center">
el-table-column>
<el-table-column prop="amount2" label="开票金额(万元)" width="70" align="center">
el-table-column>
<el-table-column prop="amount3" label="占外资企业比重" align="center" width="70">
el-table-column>
<el-table-column prop="amount4" label="纳税金额(万元)" align="center" width="80">
el-table-column>
<el-table-column prop="amount5" label="占外资企业比重" align="center" width="70">
el-table-column>
el-table>
div>
body>
<script>
var app = new Vue({
el: '#app',
created() {
// 把本地方法挂载到window中
window.getAndroidValue = this.getAndroidValue
},
data: {
spanArr: [], //用于存放每一行记录的合并数
msg: '',
token: '',
tableData: [{
id: '1',
type: '外资企业',
name: '注册外资企业总数',
amount1: '349',
amount2: '838.3',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
},
{
id: '1',
type: '外资企业',
name: '正常运营外资企业',
amount1: '349',
amount2: '838.3',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
},
{
id: '1',
type: '外资企业',
name: '台资',
amount1: '349',
amount2: '838.3',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
},
{
id: '1',
type: '外资企业',
name: '港澳',
amount1: '349',
amount2: '838.3',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
},
{
id: '1',
type: '外资企业',
name: '欧美',
amount1: '349',
amount2: '838.8',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
},
{
id: '1',
type: '外资企业',
name: '日韩',
amount1: '349',
amount2: '838.3',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
},
{
id: '1',
type: '外资企业',
name: '其他',
amount1: '349',
amount2: '838.8',
amount3: '100%',
amount4: '838.3',
amount5: '100%'
}
]
},
mounted: function() {
this.getSpanArr(this.tableData);
this.$nextTick(function() {
this.setColSpan();
})
},
methods: {
clickData(row, event, column) {
console.log(row.name)
this.toAndroid(row)
},
// 向Android传值方法
toAndroid(row) {
$App.getDataFormVue(row.name)
},
// 接收Android传过来的值方法
getAndroidValue(value) {
this.tableData = JSON.parse(value);
},
setColSpan: function() {
// console.log(document.getElementsByClassName("el-table__header"))
// 获取表头的所有单元格
var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells
// 将第二列表头单元格的colSpan设为2
x[0].colSpan = 2
// 将第三列表头单元格的display设为none
x[1].style.display = 'none'
},
getSpanArr(data) {
// data就是我们从后台拿到的数据
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
console.log(this.spanArr);
}
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
// console.log(`rowspan:${_row} colspan:${_col}`);
return {
// [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col
};
}
}
},
})
script>
<style>
.font-class-red {
color: #EE5E25 !important;
}
.font-class-green {
color: #333 !important;
}
style>
html>