vue table列表合并单元格

在 Vue 中实现表格合并单元格的方法有很多，这里介绍一种较为简单的方法：

1. 在表格中添加一个 `span` 元素，并设置其样式为不可见：

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
        <th>公司</th>
        <th>部门</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">张三</td>
        <td>20</td>
        <td>北京</td>
        <td>阿里巴巴</td>
        <td>技术部</td>
      </tr>
      <tr>
        <td>21</td>
        <td>上海</td>
        <td>腾讯</td>
        <td>市场部</td>
      </tr>
      <tr>
        <td rowspan="3">李四</td>
        <td>22</td>
        <td>广州</td>
        <td>百度</td>
        <td>人力资源部</td>
      </tr>
      <tr>
        <td>23</td>
        <td rowspan="2">深圳</td>
        <td rowspan="2">京东</td>
        <td>销售部</td>
      </tr>
      <tr>
        <td>24</td>
        <td>市场部</td>
      </tr>
    </tbody>
  </table>
</template>

<style>
table {
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

td span {
  display: none;
}
</style>

2. 在组件的 `mounted` 钩子函数中，通过遍历表格数据，判断哪些单元格需要合并，并设置 `span` 元素的内容和样式：

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
        <th>公司</th>
        <th>部门</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td :rowspan="item.rowspan">{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.city }}</td>
        <td>{{ item.company }}</td>
        <td>{{ item.department }}</td>
        <td>
          <span v-if="item.rowspan > 1" :style="{ display: 'inline-block', width: '100%', height: item.rowspan * 40 + 'px', position: 'absolute', top: (index + item.index) * 40 + 'px', backgroundColor: '#fff' }">{{ item.name }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { name: '张三', age: 20, city: '北京', company: '阿里巴巴', department: '技术部', rowspan: 2, index: 0 },
        { name: '张三', age: 21, city: '上海', company: '腾讯', department: '市场部', rowspan: 0, index: 0 },
        { name: '李四', age: 22, city: '广州', company: '百度', department: '人力资源部', rowspan: 3, index: 1 },
        { name: '李四', age: 23, city: '深圳', company: '京东', department: '销售部', rowspan: 0, index: 1 },
        { name: '李四', age: 24, city: '深圳', company: '京东', department: '市场部', rowspan: 0, index: 1 },
      ]
    }
  },
  mounted () {
    const tdArr = this.$el.querySelectorAll('td')
    let lastTd = null
    let rowspan = 0
    let index = 0
    tdArr.forEach((td, i) => {
      if (!lastTd || td.innerText !== lastTd.innerText) {
        lastTd = td
        rowspan = 1
        index = i
      } else {
        td.style.display = 'none'
        rowspan++
      }
      const tr = td.parentNode
      if (tr) {
        const row = tr.sectionRowIndex
        const span = this.$el.querySelectorAll(`tbody tr:nth-child(${row + 1}) td:nth-child(6) span`)[0]
        if (span) {
          span.innerText = td.innerText
          span.style.display = 'inline-block'
          span.style.height = `${rowspan * 40}px`
          span.style.top = `${(index + row) * 40}px`
        }
      }
    })
  }
}
</script>

<style>
table {
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

td span {
  display: none;
}
</style>

这样就可以实现表格中相同内容的单元格合并了。需要注意的是，由于表格中的单元格是动态生成的，所以在 `mounted` 钩子函数中需要使用 `$el` 属性来获取表格元素。此外，如果表格中有多个列需要合并，可以类似地为每一列添加一个 `span` 元素，并设置其样式和内容。