我用的el-table合并的表格。但是他是根据附近相同内容合并的。但是这里有一个情况就是,需要根据前面的一二级科室来区分。
比如这里我二级科室中医科和中医男科的小组都是同样的叫中男一组,这就导致他们跨行合并了。但是我想要的是二级科室不同的有分割线不合并。或者合并的只是在对应二级科室以内的数据一样才合并。这种如何解决呢。还有一种情况,就是这种表格有时候会有空的字段。啥也没有内容。但是这样都没有内容的也会跨行合并。请问这种情况根据什么来让这个合并互相不影响呢。
你是要合并行还是列
自定义合并行或列就可以了呀,span-method方法,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
el-table自定义合并行或列 https://blog.csdn.net/qq_38157825/article/details/119211247
该回答引用gpt
对于el-table表格合并跨行,如果需要拆分对应合并,你可以使用el-table提供的scoped slot来自定义单元格内容,并进行合并处理。
针对你的需求,你可以根据二级科室进行合并分割线的处理。具体实现方式为:在每一个单元格中加入v-if指令,判断当前单元格对应的二级科室是否和上一行相同,如果相同则不显示分割线,否则显示分割线。
同时,对于空的字段,可以在合并处理中判断是否为空,并加上对应的v-if指令进行控制不进行合并。
以下是一个简单的示例代码:
<el-table :data="tableData">
<el-table-column prop="level1" label="一级科室"></el-table-column>
<el-table-column prop="level2" label="二级科室"></el-table-column>
<el-table-column prop="group" label="小组">
<template slot-scope="scope">
<div v-if="scope.row.level2 !== preLevel2">{{scope.row.group}}</div>
<div v-else v-if="scope.row.group">{{scope.row.group}}</div>
</template>
</el-table-column>
</el-table>
以上代码中,使用v-if指令判断当前单元格对应的二级科室是否和上一行相同,如果相同则不显示分割线,否则显示分割线。同时,使用v-if指令判断当前单元格是否为空,如果为空则不进行合并处理。
注意:preLevel2需要在data中初始化为undefined,并在数据更新时更新值。