table表格动态展示另一种方式

左手牵♪♡右手

已于 2022-03-22 15:05:20 修改

阅读量621

点赞数

分类专栏： table 文章标签：前端

于 2022-03-22 15:03:39 首次发布

本文链接：https://blog.csdn.net/weixin_45102212/article/details/123660335

版权

本文介绍了如何使用原生HTML表格实现动态展示，特别是处理跨行跨列的情况，提供了一种避免复杂循环的嵌套写法。此外，也提到可以利用Element UI等组件库来简化表格实现。文中包含一个简单的测试数据和表格样例。

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

用原生table去实现，尤其跨行跨列得时候，循环会非常让人抓狂，之前写过一篇简单得循环，这次可以不循环用嵌套来写。当然也可以用element的表格组件去写都可以实现：
在这里插入图片描述

          <div class="title">
            <table>
              <tr>
                <th></th>
                <th width="140">岗位标准胜任力得分</th>
                <th width="80">对比差值</th>
                <th>匹配度</th>
                <th>表现</th>
                <th>任职者测评得分</th>
                <th>离散</th>
                <th>调整方向</th>
              </tr>
              <template v-for="(item,index) in list"  rowspan="4">
                <tr :key="index">
                  <td width="40">{
  {item.oo }}</td>