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

最新推荐文章于 2024-09-19 09:59:17 发布

hello芳芳

最新推荐文章于 2024-09-19 09:59:17 发布

阅读量4k

点赞数

文章标签： qml cmake datagrid ext tab

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

版权

<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 }
            }
          }
        }
      }
    },
}