一个比官网更好的el-table 实现跨行展示的例子-Toy模板网

这篇具有很好参考价值的文章主要介绍了一个比官网更好的el-table 实现跨行展示的例子。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-table 实现跨行展示的例子，好吧，这个问题好像挺容易的，官网文档就有例子，用的是span-method，不过官网给的例子其实实现起来有时候并不容易，而且也不是很灵活，这里给出一种比官网更好的实现方式。以跨行为例，跨列其实是类似的。

效果如图

一个比官网更好的el-table 实现跨行展示的例子,vue.js,elementui,javascript

1、使用的还是官方的span-method，这里以返回对象的方式为例，相比于官网我们在el-table-column 加了 :class-name="crossTag"，作为对应列是否需要跨行的标识，后面用于span-method判断。比官网用列数去判断更灵活，官网用数字进行判断，如果有增减，这个判断数字就需要重新调整，由于没有相关参数可传，这里取巧用了class-name。

<el-table :data="tableData2" border :span-method="objectSpanMethod">
      <el-table-column type="selection" width="55" :class-name="crossTag" />
      <el-table-column prop="id" label="采购需求单"  :class-name="crossTag" />
      <el-table-column prop="name" label="需求来源"  :class-name="crossTag" />
      <el-table-column prop="amount1" label="采购仓"  />
      <el-table-column prop="amount2" label="状态" />
      <el-table-column :class-name="crossTag" label="操作">
        <template #default>
          <el-button @click="handleSave" link type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
</el-table>

2、js相关处理，代码如下，关键部分已通过注释部分的说明文章来源地址https://www.toymoban.com/news/detail-802136.html

// 假设后端返回数组，这种跨行的方式，后端大概率会以这种方式返回，你会发现el-table无法显示对应的值，所以需要对其展开成一维数组。
const tableData1 = [
  {
    id: '12987122',
    name: 'Tom',
    children: [
      { amount1: '111', amount2: '3.2' },
      { amount1: '222', amount2: '3.3' },
    ],
  },
  {
    id: '12987124',
    name: 'Tom',
    children: [{ amount1: '3333', amount2: '4444' }],
  },
]

// 展开二维数组，方便el-table显示，同时设置对应行的rowspan，colspan
function formatData(aData) {
  const newList: any[] = []
  aData.forEach((item: any) => {
    const { list } = item

    if (list && list.length) {
      const length = list.length
      const requiredNum = list.reduce((total, item) => {
        return total + Number(item.purchaseQuantity)
      }, 0)
      // 遍历展开成一维数组  
      list.forEach((childItem, index) => {
        const newItem = index
          ? { ...childItem, ...item, rowspan: 0, colspan: 0 }  // 需要隐藏的
          : { ...childItem, ...item, requiredNum, rowspan: length, colspan: 1 } // 通过在对应行数据中添加额外的rowspan，colspan，用于设置跨多少行，这种实现起来不会那么抽象，比较容易想到。
      
        delete newItem.list
        newList.push(newItem)
      })
    } else {
      // 按原样显示的
      const newItem = { ...item, rowspan: 1, colspan: 1 }
      delete newItem.list
      newList.push(newItem)
    }
  })
  return newList
}

// 当然多了两次遍历，性能稍微有所损耗，但一般不碍事。
const tableData2 = formatData(tableData1)


// 处理行合并
const objectSpanMethod = ({ row, column }) => {
  // 判断哪些列需要做跨行处理
  if (column.className && column.className.includes(crossTag)) {
    // 直接从行数据中拿到rowspan, colspan 
    const { rowspan, colspan } = row
    return {
      rowspan,
      colspan,
    }
  }
}

到了这里，关于一个比官网更好的el-table 实现跨行展示的例子的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！