vue el-table的合并单元格与拆分单元格

最新推荐文章于 2025-07-14 16:50:17 发布

hello芳芳

最新推荐文章于 2025-07-14 16:50:17 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

文章标签： qml cmake datagrid ext tab

本文链接：https://blog.csdn.net/jyf_568/article/details/123896435

本文介绍了一种使用Vue.js实现的表格数据展示方法，通过合并相同项来优化视觉效果和提高数据可读性。该方法主要应用于包含多个字段（如物品名称、型号、生产厂商等）的复杂表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      class="tb-edit"
      border
      stripe
      :height="tableHeight"
      :header-cell-style="{'background':'#F5F4F7'}"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      />
      <el-table-column
        prop="stritemname"
        label="物品"
        min-width="180"
      />
      <el-table-column
        prop="stritemstyle"
        label="型号"
        min-width="180"
      />
      <el-table-column
        prop="strmadefactname"
        label="生产厂商"
        min-width="180"
      />
      <el-table-column
        prop="strpurchaseunit"
        label="单位"
        align="center"
        width="70"
      />
      <el-table-column
        prop="dblquantity"
        label="采购数量"
        width="90"
        align="center"
      />
      <el-table-column
        prop="dbldeliveryquantity"
        label="配货数量"
        width="90"
        align="center"
      />
      <el-table-column
        prop="strbatchcode"
        label="批次"
        width="150"
        align="center"
      />
      <el-table-column
        prop="validity"
        label="有效期"
        width="180"
        align="center"
      />
      <el-table-column
        prop="dblprice"
        label="单价"
        width="100"
        align="right"
      />
      <el-table-column
        prop="totalprice"
        label="金额"
        width="100"
        align="right"
      />

    </el-table>

 methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const fields = ['stritemname', 'stritemstyle', 'strmadefactname', 'strpurchaseunit', 'dblquantity']
      if (fields.includes(column.property)) {
        const cellValue = row['lngitemid']
        if (cellValue && fields.includes(column.property)) {
          const prevRow = this.tableData[rowIndex - 1]
          let nextRow = this.tableData[rowIndex + 1]
          if (prevRow && prevRow['lngitemid'] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            // return { rowspan: row.rowspan, colspan: 1 }
            let countRowspan = 1
            while (nextRow && nextRow['lngitemid'] === cellValue) {
              nextRow = this.tableData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
    },
}