效果如下：

image.png
image.png

版本信息如下：

"vue": "^2.5.2", "element-ui": "^2.7.2",

代码如下：

<!--表格行合并-->
<template>
  <div style="margin: 20px">
    <div style="margin: 20px 0;text-align: right;">
      <el-button type="primary" @click="logTableData">打印表格数据</el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :span-method="spanMethod"
      :header-row-style="headerRowStyle"
      style="width: 100%">

      <el-table-column
        align="center"
        v-for="(col,colIndex) in tableHeader"
        :key="`col-${colIndex}`"
        :prop="col.prop"
        :min-width="col.width || 80"
        :label="col.label">
        <template slot-scope="{row, $index}">
          <el-input v-if="!col.noEdit && row._edit" class="inputNumber" :placeholder="`请输入${col.label}`"
                    v-model="row[col.prop]"/>
          <span v-else>{{ row[col.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="配比">
        <el-table-column label="" align="center" v-for="rateColIndex in maxTableColLength" :key="`rate-${rateColIndex}`"
                         :min-width="80">
          <template slot-scope="{row, $index}">


            <!--                第一行-->
            <template v-if="row.rowSpan">
              <span v-if="rateColIndex <= row.list.length">{{ row.list[rateColIndex - 1].name }}</span>
            </template>

            <!--                第二行,操作的也是上一行的数据-->
            <!--              有这项的才可编辑-->
            <template v-else-if="rateColIndex <= tableData[$index-1].list.length">

              <el-input class="inputNumber" type="number" v-if="tableData[$index-1]._edit" placeholder="请输入"
                        v-model="tableData[$index-1].list[rateColIndex-1].rate"/>
              <span v-else>{{ valFixed(tableData[$index-1].list[rateColIndex - 1].rate, 2) }}</span>

            </template>

          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="120">
        <template slot-scope="{row,$index}">
          <template v-if="!row._edit">
            <el-button @click="rowEdit(row, $index)" type="text">修改</el-button>
          </template>
          <template v-else>
            <el-button @click="rowSave(row, $index)" type="text">保存</el-button>
            <el-button @click="rowCancel(row, $index)" type="text">取消</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableLoading: false,
      tableHeader: [
        {
          prop: 'pileNo',
          label: '堆号',
          noEdit: true
        },
        {
          prop: 'tfe',
          label: '品位'
        },
        {
          prop: 'ironWeight',
          label: '铁水产量'
        }
      ],
      tableData: [],
      historyRow: null, // 行编辑时存储历史数据
    }
  },
  computed: {
    // 表格中最大配比列长度
    maxTableColLength() {
      let arr = this.tableData.map(item => {
        return (item.list || []).length
      })
      return arr.length ? Math.max(...arr) : 0
    },
  },
  created() {
    this.initData()
  },
  methods: {
    // 判断值是否为空
    isNull(val) {
      return val === null || val === void 0 || val === '' || (val).toString() === 'NaN'
    },
    /**
     * 值保留小数处理
     * @val: 需要保留小数的值
     * @fixed：小数位数
     * @dt：为空时的默认值
     * @unit：单位
     * */
    valFixed(val, fixed = 3, dt = '', unit = '') {
      return this.isNull(val) ? dt : (parseFloat(val).toFixed(fixed) + unit)
    },
    initData() {
      // 模拟数据
      let data = [
        {
          pileNo: '11111111',
          tfe: 56.2,
          ironWeight: 5000,
          list: [
            {
              name: '精粉1',
              rate: 10,
            },
            {
              name: '精粉2',
              rate: 5,
            },
            {
              name: '混合粉2',
              rate: 8,
            },
            {
              name: '混合粉4',
              rate: 3,
            }
          ],
        },
        {
          pileNo: '22222222',
          tfe: 50.34,
          ironWeight: 5500,
          list: [
            {
              name: '精粉5',
              rate: 10,
            },
            {
              name: '混合粉1',
              rate: 8,
            },
            {
              name: '混合粉2',
              rate: 3,
            }
          ],
        },
        {
          pileNo: '33333333',
          tfe: 49,
          ironWeight: 4900,
          list: [
            {
              name: '精粉5',
              rate: 5,
            },
            {
              name: '混合粉1',
              rate: 10,
            },
            {
              name: '混合粉2',
              rate: 20,
            },
            {
              name: '混合粉3',
              rate: 20,
            }
          ],
        }
      ]

      let tableData = []
      data.map(item => {
        let list = item.list || []
        tableData = tableData.concat([
          {
            ...item,
            // 辅助变量
            rowSpan: 2
          },
          {}
        ])
      })
      this.tableData = tableData
    },

    // 表头隐藏
    headerRowStyle({row, rowIndex}) {
      if (rowIndex === 1) {
        return {'display': 'none'}
      }
    },
    // 表格行合并
    spanMethod({row, column, rowIndex, columnIndex}) {
      let startColIndex = this.tableHeader.length // 数的，第五列开始是配比列
      let endColIndex = startColIndex + (this.maxTableColLength - 1)
      let isRateCol = columnIndex >= startColIndex && columnIndex <= endColIndex // 配比列不进行行合并
      if (row.rowSpan) { // name行
        if (!isRateCol) {
          return [row.rowSpan, 1]
        } else {
          return [1, 1]
        }
      } else { // 配比行
        if (!isRateCol) {
          return [0, 1]
        } else {
          return [1, 1]
        }
      }

    },

    // 打印数据
    logTableData() {
      let data = this.tableData.filter(item => item.rowSpan)
      data.map((item) => {
        let str = ''
        this.tableHeader.map(sub => {
          str += `${sub.label}: ${item[sub.prop]} `
        })
        item.list.map(sub => {
          str += `${sub.name}: ${sub.rate} `
        })
        console.log(`%c${str}`, 'color: #43bb88;font-weight: bold;');
      })

      console.log('最终数据为：', data)
    },

    // 行编辑 --------------- start

    // 修改
    rowEdit(row, rowIndex) {
      // console.log(row, rowIndex)
      if (this.tableData.find(item => item._edit)) return this.$message({
        message: '请保存正在编辑的行',
        type: 'warning'
      });

      let editRow = row
      this.historyRow = JSON.parse(JSON.stringify(editRow))
      this.$set(editRow, '_edit', true)
    },
    // 保存正在编辑的
    rowSave(row, rowIndex) {
      // console.log(row, rowIndex)
      this.historyRow = {}
      row._edit = false
    },
    // 取消保存
    rowCancel(row, rowIndex) {
      // console.log(row, rowIndex)
      this.tableData.splice(rowIndex, 1, {
        ...this.historyRow,
        _edit: false
      })
      this.historyRow = {}
    }

    // 行编辑 --------------- end
  }
}
</script>

<style scoped lang="less">

.inputNumber {
  /deep/ input::-webkit-outer-spin-button,
  /deep/ input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  /deep/ input[type='number'] {
    -moz-appearance: textfield;
  }
}
</style>

大体思路

image.png

1.表头其实有两行，下面这行被隐藏了。
2.表格中每行数据是两行，表格行合并了，第二行是空行，编辑时操作的是第一行的数据。
3.这里使用行合并是为了让配比列表格宽度自适应。

若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/0fdfbb68a73e?v=1668668903593，转载请注明出处，谢谢。