文章来源地址https://www.toymoban.com/news/detail-707394.html
<template>
<div class="container">
<el-table :data="tableData" :border="true" :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'left' }"
:cell-style="{ 'text-align': 'left' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
<el-table-column type="index" label="序号" width="100"></el-table-column>
<el-table-column prop="product_name" label="名称1"></el-table-column>
<el-table-column prop="cap_name" label="名称2"></el-table-column>
<el-table-column prop="name3" label="名称3"></el-table-column>
<el-table-column prop="name4" label="名称4">
<template slot-scope="scope">
<el-input v-model="scope.row.name4" placeholder="请输入设备名称" maxlength="30" show-word-limit @input="inputFn" />
</template>
</el-table-column>
<el-table-column prop="name5" label="名称5">
<template slot-scope="scope">
<el-input v-model="scope.row.name5" placeholder="请输入设备名称" maxlength="30" show-word-limit @input="inputFn" />
</template>
</el-table-column>
<el-table-column prop="name6" label="总计">
<template slot-scope="scope">
<span>{{Number(scope.row.name5).toLocaleString() + Number(scope.row.name4).toLocaleString()}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="addRow()" class="button" type="text" size="small"> <i
class="el-icon-circle-plus-outline"></i></el-button>
<el-button @click="deleteEach(scope.row)" v-if="!scope.row.span" class="button" type="text" size="small">
<i class="el-icon-remove-outline"></i></el-button>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData2" :border="true" :show-header="false"
:header-cell-style="{ 'font-weight': 'normal', 'text-align': 'left' }" :cell-style="{ 'text-align': 'left' }"
size="mini" style="width: 100%" :span-method="arraySpanMethod">
<el-table-column label="序号" width="100">
<template slot-scope="scope">
<span>{{ ((currentPage-1)*pageSize+scope.$index+1 + tableData.length) }}</span>
</template>
</el-table-column>
<el-table-column prop="product_name" label="名称1"></el-table-column>
<el-table-column prop="cap_name" label="名称2"></el-table-column>
<el-table-column prop="name3" label="名称3"></el-table-column>
<el-table-column prop="name4" label="名称4"></el-table-column>
<el-table-column prop="name5" label="名称5"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="addRow2()" class="button" type="text" size="small"> <i
class="el-icon-circle-plus-outline"></i></el-button>
<el-button @click="deleteEach2(scope.row)" v-if="!scope.row.span" class="button" type="text" size="small">
<i class="el-icon-remove-outline"></i></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'tableCom',
data() {
return {
// 注释：示例是用参数-product_name进行处理-该例好像只有数据是连续aaaa 或 bbbb才可以（第一条是a第二条是a第三条是b---不能第二条是b，第三条是a）
tableData: [{
product_name: '合同类支出',
name3: '合同类支出',
name4: null,
name5: 0,
span: true,
name6: null,
cap_name: '合同类支出'
},
{
product_name: '合同类支出',
cap_name: '合同类支出',
name3: '合同类支出',
name4: 4,
name5: 0,
span: true,
name6: 0
},
{
product_name: '集团总部小计',
cap_name: '集团总部小计',
name3: '集团总部小计',
name4: 24,
name5: 0,
span: false,
name6: 0
}
],
tableData1: [{
product_name: '合同类支出',
cap_name: '合同类支出',
name3: '合同类支出',
name4: 'name14',
name5: 0,
span: true
},
{
product_name: '集团总部小计',
cap_name: '集团总部小计',
name3: '集团总部小计',
name4: 'name24',
name5: 0,
span: false
}
],
tableData2: [{
product_name: '非合同类',
cap_name: '非合同类',
name3: '非合同类',
name4: 'name14',
name5: 0,
span: true
},
{
product_name: 1,
cap_name: 1,
name3: 'name23',
name4: 'name24',
name5: 0,
span: false
}
],
tableData3: [{
product_name: 'tong',
cap_name: 'tong',
name3: 'tong',
name4: 'name14',
name5: 0,
span: true
},
{
product_name: 1,
cap_name: 1,
name3: 'name23',
name4: 'name24',
name5: 0,
span: false
}
],
currentPage: 1,
pageSize: 10
};
},
methods: {
inputFn() {
console.log('inputFn', this.tableData)
},
arraySpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
// 合并行 产品名字相同合并
// if (columnIndex === 1) {
// if (rowIndex === 0 || row.product_name != this.dataSource[rowIndex - 1].product_name) {
// let rowspan = 0;
// this.dataSource.forEach(element => {
// if (element.product_name === row.product_name) {
// rowspan++;
// }
// });
// return [rowspan, 1];
// } else {
// return [0, 0];
// }
// }
// 合并列 名称值都为1 的合并
let colspan = 0;
let colkeys = Object.keys(row);
let currentindex = columnIndex - 1;
if (row[colkeys[currentindex]] === '合同类支出' || row[colkeys[currentindex]] === '非合同类' || row[colkeys[
currentindex]] === '集团总部小计') {
if (row[colkeys[currentindex - 1]] != row[colkeys[currentindex]]) {
for (let i = currentindex; i < colkeys.length; i++) {
if (row[colkeys[i]] === '合同类支出' || row[colkeys[i]] === '非合同类' || row[colkeys[i]] === '集团总部小计') {
colspan++;
} else {
break;
}
}
console.log('colspan', colspan)
return [1, colspan];
} else {
return [0, 0];
}
}
},
deleteEach(row) {
this.tableData = this.tableData.filter(v => v.id !== row.id);
},
deleteEach2(row) {
this.tableData2 = this.tableData2.filter(v => v.id !== row.id);
},
addRow() {
this.addPublicFn(this.tableData)
},
addRow2() {
this.addPublicFn(this.tableData2)
},
addPublicFn(list) {
let isTable = list.filter(d => d.showfile == true)
console.log('list', list)
isTable.length != 0 ? list.push({
product_name: '',
cap_name: '',
name3: '',
name4: '',
name5: 0,
delTag: true,
id: new Date().getTime()
}) : list.push({
product_name: '',
cap_name: '',
name3: '',
name4: '',
name5: 0,
delTag: true,
id: new Date().getTime()
})
}
},
created() {
}
};
</script>
文章来源：https://www.toymoban.com/news/detail-707394.html
到了这里，关于elementui table 合并列的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
