vue表格重新拼装数据

1、数据处理

代码只做参考，部分有修改

  async init() {
      if (arguments[0] === undefined) {
      //await   必须用在async后面才有效
        if (!(await this.beforeInit())) {
          return
        }
      }
      return new Promise((resolve, reject) => {
        this.loading = true
        this.data = []
        initData(this.url, this.params).then(res => {
          for (let i = 0; i < res.content.length; i++) {
            res.content[i].bills = {}
            res.content[i].bills.a= res.content[i].a
            res.content[i].bills.b= res.content[i].b
            res.content[i].bills.c= res.content[i].c
            res.content[i].bills.pid = res.content[i].id
            res.content[i].bills.isShow = true
            this.data.push(res.content[i].bills)
            if (res.content[i].icstockbillEntries.length > 0) {
              const temp = {
                name: '',
                number: 0
              }
              for (let j = 0; j < res.content[i].arr.length; j++) {
                temp.name= `(${res.content[i].arr.length}条)`
                temp.number+= Number(res.content[i].arr[j].number)
                if (res.content[i].arr[j].s) {
                  res.content[i].arr[j].s = res.content[i].arr[j].s.sName
                }
                this.data.push(res.content[i].arr[j])
              }
              this.data.push(temp)
            }
          }
          this.total = res.totalElements
          console.log(this.data)
          setTimeout(() => {
            this.loading = false
          }, this.time)
          resolve(res)
        }).catch(err => {
          this.loading = false
          reject(err)
        })
      })
    },

2、表格方法

<el-table
      v-loading="loading"
      ref="tb"
      :header-cell-style="{}"
      :data="data"
      :height="height"
      :span-method="arraySpanMethod"
      :row-class-name="tableRowClassName"
      resizable
      border
      style="width: 100%"
      @row-click="clickRow"
      @row-dblclick="edit"
      @selection-change = "selectData">
      <el-table-column prop="bills" width="10px" label="" >
        <template slot-scope="scoped" >
          <div v-if="scoped.row.isShow" style="width:100%">
            <!-- <svg-icon :icon-class="icon" /> -->
            <span style="color:#3764A0">
              单据信息（
              单据编号：<span style="color:red">{{ scoped.row.a}}</span>
              单据日期：<span style="color:red">{{ parseTime1(scoped.row.b) }}</span>
              处理状态：<span style="color:red">{{ scoped.row.c|getStatus }}</span>
              ）
            </span>
          </div>
        </template>
      </el-table-column>

      <!-- 多选框 -->
      <el-table-column
        type="selection"
        width="40"/>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" width="100" label="代码" />
      <el-table-column prop="model" width="200" label="型号" />
      <el-table-column prop="level" width="80" label="级别" />
      <el-table-column prop="unit" width="80" label="单位" />
      <el-table-column prop="number" width="80" label="数量" />
    </el-table>

export default {
//过滤器
 filters: {
    getStatus(val) {
      switch (val) {
        case 0:
          return '未审'
        case 1:
          return '已审'
        case 2:
          return '二审'
      }
    }
  },
  //监听浏览器窗口大小改变
   mounted() {
    window.onresize = () => {
      return (() => {
        this.height = document.documentElement.clientHeight - 240
      })()
    }
  },
   data() {
    return {
      isClick: false,
      visible: false,
      freshVisible: false,
      delLoading: false,
      icon: 'icon1',
      rowIds: [],
      deleteIds: [],
      detailIds: [],
      multipleSelection: [],
      isAdd: true,
      conditions: {},
      height: 625,
      pageSize: 20
    }
  },
  methods: {
  // 合并表格行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && this.data[rowIndex].isShow) {
        return [1, 10]
      }
      for (let i = 1; i < 10; i++) {
        if (columnIndex === 1 && this.data[rowIndex].isShow) {
          return [1, 0]
        }
      }
    },
       // 斑马纹表格样式
    tableRowClassName({ row, rowIndex }) {
      let color = ''
      if (rowIndex % 2 === 0) {
        color = 'warning-row'
      } else {
        color = 'success-row'
      }
      if (row.isShow) {
        color = 'table-row'
      }
      // 表格绑定的数据
      // this.$refs.tb.tableData.forEach((r, i) => {
      //   console.log(r.isShow, '1212121221212')
      // })
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (row === this.multipleSelection[i]) {
          color = 'select-row'
        }
      }
      return color
    },
     // 点击行时   变成单选
    clickRow(row, event, column) {
      console.log(row, '当前行')
      this.$refs.tb.clearSelection()
      const index = this.rowIds.indexOf(row.id)
      console
      if (index === -1) {
        this.$refs.tb.toggleRowSelection(row, true)
      } else {
        this.rowIds = []
        this.deleteIds = []
        this.$refs.tb.toggleRowSelection(row, false)
      }
    },
   }
 }

utils.js文件夹下面有如下方法

// 去掉时分秒的时间
export function parseTime1(time) {
  if (time) {
    var date = new Date(time)
    var year = date.getFullYear()
    /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    // 拼接
    return year + '-' + month + '-' + day
  } else {
    return ''
  }
}

3、展示表格界面如下