uniapp表格合并行

uniapp表格合并行实现方法

在uniapp中实现表格合并行功能，可以通过以下方式实现：

使用<table>标签和rowspan属性 通过HTML原生表格的rowspan属性可以实现行合并。在uniapp的vue文件中可以直接使用HTML标签。

<template>
  <view>
    <table border="1" style="width:100%">
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
      </tr>
      <tr>
        <td rowspan="2">张三</td>
        <td>数学</td>
        <td>90</td>
      </tr>
      <tr>
        <td>语文</td>
        <td>85</td>
      </tr>
    </table>
  </view>
</template>

使用uniapp的<uni-table>组件 如果使用uniapp的官方表格组件，需要通过计算属性动态处理数据：

<template>
  <view>
    <uni-table>
      <uni-tr>
        <uni-th>姓名</uni-th>
        <uni-th>科目</uni-th>
        <uni-th>成绩</uni-th>
      </uni-tr>
      <uni-tr v-for="(item,index) in tableData" :key="index">
        <uni-td v-if="item.showName" :rowspan="item.rowspan">{{item.name}}</uni-td>
        <uni-td>{{item.subject}}</uni-td>
        <uni-td>{{item.score}}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', subject: '数学', score: 90, showName: true, rowspan: 2 },
        { name: '张三', subject: '语文', score: 85, showName: false, rowspan: 0 }
      ]
    }
  }
}
</script>

使用CSS实现伪合并效果 通过绝对定位和相对定位模拟合并效果：

<template>
  <view class="table-container">
    <view class="table-row" v-for="(row,index) in tableData" :key="index">
      <view class="table-cell" v-if="row.showName" :style="{height: row.rowspan*50+'px'}">
        {{row.name}}
      </view>
      <view class="table-cell">
        {{row.subject}}
      </view>
      <view class="table-cell">
        {{row.score}}
      </view>
    </view>
  </view>
</template>

<style>
.table-container {
  display: flex;
  flex-direction: column;
}
.table-row {
  display: flex;
  position: relative;
}
.table-cell {
  flex: 1;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

使用第三方表格组件 可以引入第三方表格组件如uView的u-table组件：

<template>
  <u-table>
    <u-tr>
      <u-th>姓名</u-th>
      <u-th>科目</u-th>
      <u-th>成绩</u-th>
    </u-tr>
    <u-tr v-for="(item,index) in tableData" :key="index">
      <u-td v-if="item.showName" :rowspan="item.rowspan">{{item.name}}</u-td>
      <u-td>{{item.subject}}</u-td>
      <u-td>{{item.score}}</u-td>
    </u-tr>
  </u-table>
</template>

在实际开发中，需要根据项目需求选择合适的实现方式。原生HTML表格简单直接，uniapp组件更符合uniapp生态，CSS方案灵活性高，第三方组件功能丰富但会增加包体积。