element-plus中的table为什么相同的数据并没有合并成一个

我想把所有的第一列的名字相同的内容合并。我发现只有相邻的数据合并了。实际上我想做到的是所有的后端给的数据,不管他的顺序怎样的,只有deviceTypeName 一样的都合并的。

element-plustable 中,数据合并行通常是基于相邻行的数据进行合并的。这是因为表格渲染的逻辑是按照数据数组的顺序逐行渲染,并且合并行的实现通常是通过 span-method 方法来控制某些单元格的 rowspancolspan 属性,以此来达到合并的效果。

常规的合并相邻的deviceTypeName 相同的数据的做法:

复制代码
<el-table :data="tableData" :span-method="objectSpanMethod">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>

const tableData = ref([
      { id: 1, deviceTypeName : 'John', address: 'Address 1' },
      { id: 1, deviceTypeName : 'John', address: 'Address 2' },
      { id: 2, deviceTypeName : 'Jane', address: 'Address 3' },
    ]);

方法1:

复制代码
const objectSpanMethod= ({ row, column, rowIndex, columnIndex })=> {
  if (columnIndex === 0) {
    const _row = flitterData(proTable.value?.tableData, 'deviceTypeName').one[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
}

//把arr数组中name相同的元素合并
const flitterData= (arr, name)=> {
  let spanOneArr = []
  let concatOne = 0
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1)
    } else {
      if (item[name] === arr[index - 1][name]) {
        spanOneArr[concatOne] += 1
        spanOneArr.push(0)
      } else {
        spanOneArr.push(1)
        concatOne = index
      }
    }
  })
  return {
    one: spanOneArr,
  }
}

或者方法2:

复制代码
const objectSpanMethod = ({row,column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (columnIndex === 0) {
    const prevRow = proTable.value?.tableData[rowIndex - 1];
    if (prevRow && row.deviceTypeName == prevRow.deviceTypeName) {
      return {
        rowspan: 0,
        colspan: 1,
      };
    } else {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < proTable.value?.tableData.length; i++) {
        if (proTable.value?.tableData[i].deviceTypeName == row.deviceTypeName) {
          rowspan++;
        } else {
          break;
        }
      }
      return {
        rowspan,
        colspan: 1,
      };
    }
  }
};

把上面的deviceTypeName改成你想要合并的参数名就可以啦

如果是不相领的内容合并就需要我们重新排序。把name相同的值放在一起。

相关推荐
清风细雨_林木木13 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 小时前
链表运用到响应式中
javascript·数据结构·链表
前端农民工ws2 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育2 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿4 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11254 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_4 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手5 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js