rowspan动态设置导致的table错位问题

承進

已于 2023-03-03 10:00:55 修改

阅读量2k

点赞数 1

文章标签： javascript vue.js

于 2023-03-02 15:57:39 首次发布

本文链接：https://blog.csdn.net/qq_40759785/article/details/129301422

版权

文章讨论了在Vue中使用v-for渲染表格时遇到的问题，即当所有td元素的rowspan属性都大于1时，表格会出现错位。原因是rowspan用于占据多行，导致下一行的td无处放置。解决方案是只对第一列需要合并的单元格设置rowspan，其余设置为空，然后使用v-if过滤掉rowspan为空的项。通过调整数据结构并应用lodash的groupBy方法，实现了正确合并表格行的效果。

摘要由CSDN通过智能技术生成

问题：
整个table是在vue中通过v-for生成的，目前出现的问题是当某一个tr中所有的td元素的rowspan属性均大于1时，就会发生错位, 类似如下情况

-返回数据中包含rowspan等值）

在这里插入图片描述
原因、解决：

因为rowspan是用来占行的，如果一行里全部td的 rows 都为2 则意味着下一tr 里应该是没有 td 元素的但是实际上下一tr 又有td，所以这行的td没有容身之处，被挤到右边去了。
解决思路是除了第一项被合并的那一列 rowspan设置合并单元格的长度，剩余的rowspan设置空，再用v-if过滤掉rowspan为空的项

HTML

 <table border="1px" border-color="#ccc" cellspacing="0" class="margin-b5">
     <thead>
           <tr>
               <th align="center" width="42%">收费项目</th>
               <th align="center">支付渠道</th>
               <th align="center">服务费</th>
               <th align="center">金融手续费</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for="(item, index) in tableData" :key="index">
               <td v-if="item.rowspan" :rowspan="item.rowspan">{{ item.item_name }}</td>
               <td rowspan="1" align="center">{{ item.pay_channel_name }}</td>
               <td rowspan="1" class="c-item-red">{{ item.server_charge }}</td>
               <td rowspan="1" class="c-item-red">{{ item.pay_rate }}</td>
           </tr>
     
       </tbody>
   </table>

 import { groupBy } from 'lodash'
 const grouped = groupBy(temData.platServiceChargeList, v => v.item_type)

 // 其次合并，第一项占行，后续为0
 const result = Object.keys(grouped)
     .map(k => grouped[k].map((v, i, arr) => ({ ...v, rowspan: i === 0 ? arr.length : arr.length > 1 ? '' : 1 })))
     .flatMap(v => v)

 this.tableData = result

修改后
在这里插入图片描述