使用vue+element ui的table 以及原生table写表格完成合并行和列

最新推荐文章于 2024-09-03 16:56:52 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-09-03 16:56:52 发布

阅读量715

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Maxueyingying/article/details/119816376

版权

vue 专栏收录该内容

98 篇文章 4 订阅

订阅专栏

这篇博客展示了如何在HTML中使用`<table>`元素合并行和列，以创建具有总计行和税率信息的表格布局。通过`v-for`指令和CSS样式实现了表格的美化，并通过JavaScript的`arraySpanMethod`方法处理了单元格合并，特别是第5、6、7行的合并，使得表格式样清晰，数据展示直观。

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

1.需求：合并第5行，6行，7行的前6列
效果图：
在这里插入图片描述
使用table编写

<table class="detail-list" border="1">
          <tr>
            <th>
              <div>序号</div>
              <div>No.</div>
            </th>
            <th>
              <div>项目号</div>
              <div>Project No.</div>
            </th>
            <th>名称  Description</th>
            <th>
              <div>规格型号</div>
              <div>Spec.</div>
            </th>
            <th> 
              <div>数量</div>
              <div>Qty.</div>
            </th>
            <th>
              <div>单价</div>
              <div>Unit Price</div>
            </th>
            <th>
              <div>总价</div>
              <div>Total Price</div>
            </th>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index">
            <td class="col">{{item.a}}</td>
            <td class="col-2">{{item.a}}</td>
            <td class="col">{{item.a}}</td>
            <td class="col">{{item.a}}</td>
            <td class="col">{{item.a}}</td>
            <td class="col txt-right">{{item.a}}</td>
            <td class="col txt-right">{{item.a}}</td>
          </tr>
          <tr>
            <td colspan="6" class="tit txt-right bold">
              <div>不含税总价：</div>
              <div>Total Price Without Tax:</div>
            </td>
            <td class="bold">{{'$1111'}}</td>
          </tr>
          <tr>
            <td colspan="6" class="tit txt-right bold">
              <div>税率：</div>
              <div>Tax Rate:</div>
            </td>
            <td>{{'1111'}}</td>
          </tr>
          <tr>
            <td colspan="6" class="tit txt-right bold">
              <div>含税总价：</div>
              <div>Total Price Including Tax:</div>
            </td>
            <td class="bold">{{'$1111'}}</td>
          </tr>
        </table>

css：

.detail-list {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
  th {
    font-size: 14px;
    div {
      padding: 2px 0;
    }
  }
  th, td {
    padding: 10px;
  }
  .col {
    width: calc(100% / 8);
  }
  .col-2 {
    width: calc(100% / 8 * 2);
  }
  .tit {
    padding: 10px;
    font-size: 14px;
    div {
      padding: 2px 0;
    }
  }
  .bold {
    font-weight: bold;
  }
  .txt-right {
    text-align: right;
  }
 }

使用element ui table表格编写
html 省略哈。可参考官网上的标签来写
对应js 方法：

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 4) {
        return [1, 6];
      } else if (rowIndex === 5) {
        return [1, 6];
      } else if (rowIndex === 6) {
        return [1, 6];
      } else {
        return [1, 1]; //
      }
    },