vue框架复杂表格，实现表头循环显示

本文链接：https://blog.youkuaiyun.com/qq_36697072/article/details/126104034

1、传入array数组，数组有几个下标表格有几行

传入的tableData不是json格式，而是arrayList数组，所以在表头中设置了value属性，来与数组的下标一一对应。即在页面循环中，value=0就是要获取tableData[0]的值

tableHeader: [
        {value:0,width:90,label:"项目",fixed:"fixed"},
        {value:1,width:90,label:"分类"},
        {width:80,label:"产量",
          children:[
            {value:2,width:60,label:"计划"},
            {value:3,width:60,label:"日产"},
            {value:4,width:60,label:"超差"},
            {value:5,width:100,label:"夜班估产"},
          ]},
        {width:80,label:"主要技术经济指标",
          children:[
            {value:6,width:100,label:"利用系数 (t/m3.d)"},
            {value:7,width:80,label:"焦比 (kg/t)"},
            {value:8,width:90,label:"煤比(kg/t)"},
            {value:9,width:90,label:"焦丁比(kg/t)"},
          ]},
        {width:80,label:"渣铁成分",
          children:[
            {value:10,width:90,label:"燃料比(kg/t)"},
            {value:11,width:100,label:"一级品率(%)"},
          ]}
      ],

<template>

  <el-table :key="randomKey" ref="table"
            :data="tableData" border
            class="gl-table"
            show-overflow-tooltip stripe
            style="width: 100%">
    <template v-for="item in tableHeader">
      <el-table-column
          v-if="item.children"
          align="center"
          :min-width="item.width"
          :label="item.label"
          :fixed="item.fixed"
          show-overflow-tooltip
      >
        <el-table-column
            align="center"
            v-for="col in item.children"
            :min-width="col.width"
            :label="col.label"
            show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-show="!scope.row.isShow">{{ scope.row[ col.value] }}</span>
            <el-input v-show="scope.row.isShow" v-model="scope.row[col.value]" type="text"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
          v-else
          align="center"
          :min-width="item.width"
          :label="item.label"
          :fixed="item.fixed"
          show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-show="!scope.row.isShow">{{ scope.row[item.value] }}</span>
          <el-input v-show="scope.row.isShow" v-model="scope.row[item.value]" type="text"></el-input>
        </template>
      </el-table-column>
    </template>
    <el-table-column align="center" fixed="right" label="操作" min-width="130">
      <template slot-scope="scope">
        <el-button v-show="!scope.row.isShow" round size="small" type="primary"
                   @click.native.prevent="editRow(scope.row, scope.column)">修改
        </el-button>
        <el-button v-show="scope.row.isShow" round size="small" type="success"
                   @click.native.prevent="save(scope.$index, scope.row)">保存
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {editDailyReport} from '@/api/scbb'
import {formatDate} from "@/filters/utils";
export default {
  name: "DailyReport1",
  props: {
    tableHeight: 0,
    tableData: {},
    tableDate:'',
    tableHeader: {},
  },
  data() {
    return {
      submitTable:[],
      // isShow:true,
      randomKey: Math.random()
    }
  },
  methods: {
    renderHeader(h, {column}) {
      // 新建一个 span
      let span = document.createElement('span')
      // 设置表头名称
      span.innerText = column.label
      // 临时插入 document
      document.body.appendChild(span)
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 20
      // 移除 document 中临时的 span
      document.body.removeChild(span)
      return h('span', column.label)
    },
    editRow(row, column) {
      // console.log(row)
      row.isShow = true
      const that = this
      that.refreshTable()
      that.$nextTick(() => {
        that.$refs[column.property] && that.$refs[column.property].focus()
      })
    },
    save(index, row) {
      row.isShow = false
      let date=formatDate(this.tableDate, 'yyyy-MM-dd')
      console.log(this.tableData[index])
      this.submitTable=this.tableData[index]
      console.log(this.submitTable)
      let key="tappingReport"
      editDailyReport(date,key,this.tableData[index]).then(res => {
        console.log(res.status)
        if (res.status === 200) {
          this.$message.success('修改成功')
        }
      })
      this.refreshTable()
    },

    refreshTable() {
      this.randomKey = Math.random()
    },
    objectSpanMethod({rowIndex, columnIndex}) { // 合并单元格
      if (columnIndex === 0) { //只合并第一列
        return this.mergeCol('name', rowIndex)
      }
    },
    mergeCol(id, rowIndex) { // 合并单元格
      // id：属性名
      // rowIndex：行索引值
      let idName = this.tableData[rowIndex][id] // 获取当前单元格的值
      if (rowIndex > 0) { // 判断是不是第一行
        if (this.tableData[rowIndex][id] !== this.tableData[rowIndex - 1][id]) {
          let i = rowIndex
          let num = 0
          while (i < this.tableData.length) {
            if (this.tableData[i][id] === idName) {
              i++ // 如果相等，则索引值加1
              num++ // 合并的num计数加1
            } else {
              i = this.tableData.length
            }
          }
          return {
            rowspan: num,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else {
        let i = rowIndex
        let num = 0
        while (i < this.tableData.length) {
          if (this.tableData[i][id] === idName) {
            i++
            num++
          } else {
            i = this.tableData.length
          }
        }
        return {
          rowspan: num,
          colspan: 1
        }
      }
    },
  }
}

</script>

<style scoped>

</style>

2、传入的值是多个arry数组

每一个aray数组是表格的一行数据

<template>
  <div class="bottom-box">
    <div class="table-box">
      <vue-scroll :ops="$root.scrollOpsX">
        <div class="table-row">
          <span>项目</span>
          <span v-for="name in nameList">{{ name }}</span>
        </div>
        <div class="table-row">
          <span>称重</span>
          <span v-for="data in bunkerList">{{ data }}</span>
        </div>
        <div class="table-row">
          <span>料位</span>
          <span v-for="data in materialList">{{ data }}</span>
        </div>
        <div class="table-row">
          <span>累计</span>
          <span v-for="data in inventoryList">{{ data }}</span>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: "BottomBox",
  props: {
    nameList: {},
    materialList: {},
    inventoryList: {},
    bunkerList: {},
  }
}
</script>

> .bottom-box {
    width: 100%;
    height: 159px;
    background-color: #ffffff;
    box-shadow: 0px 10px 20px 0px rgba(35, 122, 215, 0.1);
    border-radius: 10px;

    > .table-box {
      width: 100%;
      padding: 12px 10px 0;
      box-sizing: border-box;

      .table-row {
        width: 100%;
        height: 26px;
        line-height: 26px;
        margin-bottom: 10px;
        display: flex;
        background-color: #f1f7fc;

        > span {
          flex: 1;
          min-width: 60PX;
          text-align: center;
          font-family: ArialMT;
          font-size: 14px;
          color: #353d61;

          &:nth-of-type( 1 ) {
            color: rgba(35, 122, 215, 0.8);
            font-weight: 600;
          }

          &:nth-of-type( 2n ) {
            background-color: rgba(35, 122, 215, 0.1);
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }