首页 > 技术文章 > element-ui表格合并展开、收起

yangyang03 2018-07-11 11:58 原文

headerClick (column, event) {
  // 收起
  if (column.id == 'el-table_1_column_1_column_3') {
    if (this.spreadSign) {
      let sum = 0
      let lastList = []
      this.lengthList.forEach(item => {
        item.startIndex = sum
        sum += item.len
      })
      this.lengthList.forEach(item => {
        item.len = 1
        item.spread = false
      })
      this.lengthList.forEach(item => {
        lastList.push(this.tableData3[item.startIndex])
      })
      this.tableData3 = lastList
      this.spreadSign = false
    } else {
      this.tableData3 = list.slice()
      this.lengthList.forEach(item => {
        item.len = item.originLen
        item.startIndex = 0
        item.spread = true
      })
      this.spreadSign = true
    }
  }
},
toggleRooms (row, column, cell, event) {
  let tableData3 = this.tableData3.slice()
  let lengthList = this.lengthList.slice()
  const tableIndex = lengthList.findIndex(item => item.type == row.type)
  const firstIndex = lengthList[tableIndex].startIndex
  lengthList.forEach(item => {
    if (item.type == row.type) {
      if (item.spread) {
        this.closeRoomsTitle(tableData3, lengthList, tableIndex, row, firstIndex)
      } else {
        this.spreadRoomsTitle(tableData3, lengthList, tableIndex, row, firstIndex)
      }
    }
  })
},
spreadRoomsTitle (tableData3, lengthList, tableIndex, row, firstIndex) {
  let centerData = []
  const lastIndex = firstIndex + lengthList[tableIndex].originLen
  for (let i = firstIndex; i < lastIndex; i++) {
    centerData.push({
      price: `¥10${i}`,
      name: `王小虎${i}`,
      number: `10${i}`,
      type: row.type
    })
  }
  const prevTableData = tableData3.slice(0, firstIndex)
  const nextTableData = tableData3.slice(firstIndex + 1)
  tableData3 = [...prevTableData, ...centerData, ...nextTableData]
  lengthList[tableIndex].len = centerData.length
  lengthList[tableIndex].spread = true
  this.tableData3 = tableData3
  this.lengthList = lengthList
},
closeRoomsTitle (tableData3, lengthList, tableIndex, row, firstIndex) {
  const firstList = tableData3[firstIndex]
  tableData3 = tableData3.filter(item => item.type !== row.type)
  tableData3.splice(firstIndex, 0, firstList)
  lengthList[tableIndex].len = 1
  lengthList[tableIndex].spread = false
  this.tableData3 = tableData3
  this.lengthList = lengthList
},

  

推荐阅读