本文小编为大家详细介绍“Vue表格首列相同数据合并怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue表格首列相同数据合并怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1.src/views 下新建mergeCell.vue文件，代码如下：
计算
安全
数据库
网络和加速
企业服务
<template>
<div id="app">
<el-table
:data="tableData"
:span-method="(param)=>objectSpanMethod(param)"
>
<el-table-column
prop="type_test"
label="类型"
align='center'>
</el-table-column>
<el-table-column
prop="type_spec"
label="模块"
align='center'
>
</el-table-column>
<el-table-column
prop="is_execute"
label="是否执行"
align='center'
>
<template slot-scope="scope">
<span v-if="scope.row.is_execute == true">已执行</span>
<span v-if="scope.row.is_execute == false">未执行</span>
</template>
</el-table-column>
<el-table-column
prop="result_status"
label="结果"
align='center'
>
<template slot-scope='scope'>
<el-tag :type="scope.row.result_status | ResultFilter">
{{scope.row.result_status}}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="created_at"
label="创建时间"
align='center'
>
<template slot-scope="scope">
{{ scope.row.created_at}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
filters:{
ResultFilter(status) {
const ongSteadyMap = {
SUCCESS: 'success',
FAILURE: 'danger',
NA: 'primary',
ABORTED:'info',
FAIL:'danger',
None: 'warning'
}
return ongSteadyMap[status]
},
},
data() {
return {
tableData:[
{
"id": 1,
"created_at": "2023-06-18 11:51:07",
"updated_at": "2023-04-18 11:51:07",
"type_test": "功能测试",
"type_spec": "登录",
"is_execute": true,
"result_status": "SUCCESS"
},
{
"id": 2,
"created_at": "2023-06-18 11:51:07",
"updated_at": "2023-06-18 11:51:07",
"type_test": "功能测试",
"type_spec": "退出",
"cr_id": "",
"is_execute": true,
"result_status": "SUCCESS"
},
{
"id": 3,
"created_at": "2023-06-18 11:51:07",
"updated_at": "2023-06-18 11:51:07",
"type_test": "接口测试",
"type_spec": "登录",
"cr_id": "",
"is_execute": false,
"result_status": "N/A"
},
{
"id": 4,
"created_at": "2023-06-18 11:51:07",
"updated_at": "2023-06-18 11:51:07",
"type_test": "接口测试",
"type_spec": "退出",
"cr_id": "",
"is_execute": true,
"result_status": "FAIL"
}
]
};
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
console.log('objectSpanMethod',row, column, rowIndex, columnIndex)
if (columnIndex === 0) {
const _row = this.flitterData(this.tableData).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
flitterData(arr) {
// 合并表格第一列
let spanOneArr = [];
let concatOne = 0;
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
}
else {
console.log('item',item,index)
console.log('arr',arr[index-1])
// 这里的type_test是表格绑定的字段，也就是需要合并的字段，根据自己的需求来改
if (item.type_test == arr[index -1].type_test) {
// 第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
}
});
return {
one: spanOneArr,
};
},
}
};
</script>在router下添加，如下路径
{
path: '/mergeCell',
component: Layout,
children: [
{
path: 'mergeCell',
name: 'mergeCell',
component: () => import('@/views/mergeCell.vue'),
meta: { title: 'mergeCell', icon: 'form' }
}
]
},npm run dev 运行，效果如下图
读到这里，这篇“Vue表格首列相同数据合并怎么实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/IT_heima/article/details/130227194
