vue table 单元格第一列合并

最新推荐文章于 2024-08-13 23:10:15 发布

枫林中一片叶

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量139

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41765149/article/details/140817512

版权

		<table ref="myTable" cellpadding="0" cellspacing="0" class="my-table">
          <thead>
          <tr>
            <th>考核维度</th>
            <th>考核指标</th>
            <th>考核标准</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="text-center">
              内容1
            </td>
            <td class="text-center">
              内容1
            </td>
            <td class="text-center">
              内容1
            </td>
          </tr>
          </tbody>
        </table>

mounted() {
    this.$nextTick(() => {
      this.mergeCells();
    });
  },

// 单元格合并
    mergeCells() {

      const table = this.$refs.myTable;
      const rows = Array.from(table.tBodies[0].rows);

      let lastRow = null;
      let lastValue = null;
      let rowspan = 1;

      rows.forEach(function(row) {
        const cell = row.cells[0];
        const value = cell.textContent.trim();
        if (lastRow) {
          if (value === lastValue) {
            // 如果当前行的第一列单元格与前一行相同，增加rowspan并隐藏当前单元格
            lastRow.cells[0].rowSpan = ++rowspan;
            cell.style.display = 'none';
          } else {
            // 如果不同，重置状态
            lastRow = row;
            lastValue = value;
            rowspan = 1;
          }
        } else {
          // 初始化状态
          lastRow = row;
          lastValue = value;
        }
      });
    },