vue和 element-ui 中处理table多行合并问题

2019-03-13  本文已影响0人  jane819
getIndex(all) {  // all 后台返回的数据
    const arr = []
    const table = all
    const getTable = []
    let length = 0
    table.forEach((item, i, data) => {
      const index = i === 0 ? 0 : length // 下标
      length += item.solution_part_items.length
      arr[index] = item.solution_part_items.length
      if (item.solution_part_items && item.solution_part_items.length) {
        item.solution_part_items.forEach((subItem) => {
          getTable.push({
            part_name: item.luxury_part.part_name, // 部位
            item_summary: subItem.item_summary, // 症状
            image_url: subItem.image_url, // 细节图
            severity: subItem.severity, // 严重程度
            fixable: subItem.fixable, // 是否可以修复
            service_summary: subItem.service_summary // 服务工艺、
          })
        })
      }
    })
    this.arr = arr
    this.GoodsProblem = getTable
  }

  // 合并表格方法
<el-table
    border
    style="width: 100%"
    :span-method="arraySpanMethod"
  >
</el-table>
arraySpanMethod({
  row, column, rowIndex, columnIndex
}) {
  if (columnIndex === 0) {
    const index = this.arr[rowIndex]  // 根据下标合并几列
    if (typeof (index) === 'number') {
      return {
        rowspan: index,
        colspan: 1
      }
    }
    return {
      rowspan: 0,
      colspan: 0
    }
  }
  return {
    rowspan: 1,
    colspan: 1
  }
}
上一篇 下一篇

猜你喜欢

热点阅读