美文网首页
vue和 element-ui 中处理table多行合并问题

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

作者: jane819 | 来源:发表于2019-03-13 11:58 被阅读0次
  • 根据后台返回的数据处理表格合并问题:
  • 代码如下
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
  }
}

相关文章

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

    根据后台返回的数据处理表格合并问题: 代码如下

  • 表格合并

    要求:熟悉element-ui中table的普通合并方式 element-ui 官方网站的table普通合并方式,...

  • 笔记:项目遇到问题

    vue中处理多行文本溢出显示省略号解决兼容问题 vue项目在IE浏览器打开空白 如何修改element-UI框架的...

  • element-ui el-tab

    vxe-table vue实现表格单元格的拆分、合并 el-table的那些特殊用法 element-ui表格列e...

  • Element-UI el-table多行合并问题

    最终效果 单元格被合并,且鼠标悬浮有变化 数据处理 需要对数据进行处理,按照要合并的列排好序 合并行 合并原理,相...

  • element-ui table表格多行合并

    前提条件:要求数据源必须是有序的(如按id分类,即id相同的要挨在一起,不能乱排。) 然后,首先对数据源进行一次遍...

  • 表格合并

    element-ui el-table 表格合并后,鼠标经过的高亮显示问题 合并后高亮是这样的 目标效果 代码

  • 使用element-ui中的table表格多行合并

    这个东西,用的element-ui,难点在于动态地计算每一行的数据,应该合并的行数和列数。 前提条件:要求数据源必...

  • vue混入(mixins)的应用

    vue的API中有个混入,这里主要介绍利用选项合并来二次封装element-ui的el-table标签,使其达到能...

  • Elementui table合并表格(一)

    1、效果图 2、实现代码 3、参考链接或延升阅读 element-UI表格table实现表格行的动态合并vue+e...

网友评论

      本文标题:vue和 element-ui 中处理table多行合并问题

      本文链接:https://www.haomeiwen.com/subject/ovezpqtx.html