先看效果
代码如下:有备注
<template>
<div style="margin: 10px">
<!-- 合并列组件 -->
<h2>合并列组件</h2>
<table2
:tableList="tableList"
:tableData="tableData"
merge
:amendTableData="amendTableData"
sortIndex="qymc"
:config="{ columnIndex: [1, 2] }"
:slotShow="{
show: true,
index: [4, 5, 6]
}"
>
<!-- <template v-slot="{ cellIndex, row }">
<el-button @click="showDetail(scope)">{
{
row[Object.keys(row)[cellIndex - 1]]
}}</el-button>
</template> -->
<el-table-column>
<template v-slot="{ cellIndex, row }">
<el-button @click="showDetail(scope)">{
{
row[Object.keys(row)[cellIndex - 1]]
}}</el-button>
</template>
</el-table-column>
</table2>
</div>
</template>
<script setup>
import table2 from '@/components/liuxiongfei/table/index.vue';
function showDetail(val, row) {
console.log(val, row, 'xxxxxxxxx');
}
// 序号修改函数
function amendTableData(Nosort, i) {
tableData[i].index = Nosort;
}
const tableList = [
{ prop: 'index', label: '序号' }, //序号合并传prop=index
{ prop: 'xzqh', label: '行政区划' },
{ prop: 'qymc', label: '企业名称' },
{ prop: 'pkmc', label: '排口名称' },
{ prop: 'bjlx', label: '报警类型' },
{ prop: 'hjbjcs', label: '合计报警次数' },
{ prop: 'bjyz', label: '报警因子' },
{ prop: 'cz', label: '操作' }
];
const tableData = [
{
xzqh: '元和街道',
qymc: '江苏奥达服饰有限公司',
pkmc: '废水0#排口',
bjlx: '水环境-日数据超标',
hjbjcs: '0',
bjyz: 'co0'
},
{
xzqh: '元和街道',
qymc: '江苏奥达服饰有限公司',
pkmc: '废水1#排口1',
bjlx: '水环境-日数据超标1',
hjbjcs: '1',
bjyz: 'co1'
},
{
xzqh: '元和街道',
qymc: '江苏奥达服饰有限公司2',
pkmc: '废水2#排口2',
bjlx: '水环境-日数据超标2',
hjbjcs: '2',
bjyz: 'co2'
},
{
xzqh: '元和街道3',
qymc: '江苏奥达服饰有限公司3',
pkmc: '废水3#排口3',
bjlx: '水环境-日数据超标3',
hjbjcs: '3',
bjyz: 'co3'
},
{
xzqh: '元和街道3',
qymc: '江苏奥达服饰有限公司4',
pkmc: '废水4#排口4',
bjlx: '水环境-日数据超标4',
hjbjcs: '4',
bjyz: 'co4'
},
{
xzqh: '元和街道5',
qymc: '江苏奥达服饰有限公司5',
pkmc: '废水5#排口5',
bjlx: '水环境-日数据超标5',
hjbjcs: '5',
bjyz: 'co5'
},
{
xzqh: '元和街道6',
qymc: '江苏奥达服饰有限公司6',
pkmc: '废水6#排口6',
bjlx: '水环境-日数据超标6',
hjbjcs: '6',
bjyz: 'co6'
},
{
xzqh: '元和街道7',
qymc: '江苏奥达服饰有限公司7',
pkmc: '废水7#排口7',
bjlx: '水环境-日数据超标7',
hjbjcs: '7',
bjyz: 'co7'
},
{
xzqh: '元和街道8',
qymc: '江苏奥达服饰有限公司8',
pkmc: '废水8#排口8',
bjlx: '水环境-日数据超标8',
hjbjcs: '8',
bjyz: 'co8'
},
{
xzqh: '元和街道9',
qymc: '江苏奥达服饰有限公司9',
pkmc: '废水9#排口9',
bjlx: '水环境-日数据超标9',
hjbjcs: '9',
bjyz: 'co9'
},
{
xzqh: '元和街道10',
qymc: '江苏奥达服饰有限公司10',
pkmc: '废水10#排口10',
bjlx: '水环境-日数据超标10',
hjbjcs: '9',
bjyz: 'co10'
}
];
</script>
<style scoped></style>