优雅:Element-UI table任意复杂单元格合并处理技巧

用法说明

处理表格单元格合并是很常见的开发需求,el-table官方提供了合并单元格的用法 如下:

根据使用说明很容易写出带有一堆if else 叠加的屎,随着合并条件的嵌套更会屎上加屎

javascript 复制代码
const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}

来看看哥们的究极无敌解决方案

先从案例说起,代码实现放在最后了,下面是一个很简单的表格,数据结构也列出来了。

javascript 复制代码
const tableData = [
 {
    id: '12987122',
    species:'人类',
    gender:'男',
    age:'10-20',
    name: 'Tom1',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    species:'人类',
    gender:'男',
    age:'10-20',
    name: 'Tom1',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  //....
]

现在我们按照物种这个维度将物种这一列进行行合并

使用我的合并方案只需要写出如下代码

vue 复制代码
    <template>
        <el-table  :data="tableData"  :span-method="spanMethod">
        //...
        </el-table>
    </template>
    <script  setup>
        //...
        const spanMethod = rowSpan(tableData,'species',['species'])
    </script>

简简单单一行代码搞定,牛逼坏了。

rowSpan接收三个参数

  1. 表格数据项
  2. 第二个参数代表合并的参照维度,如当前例子中传入的'species',表示表格数据中'species'字段相同的数据项应该被合并
  3. 第三个参数用于指定合并单元格被应用于哪一列上

接下来上点强度,此时产品经理提出,所有物种为"人类"的【Amount 1】取值都是234 我们需要按照物种维度,将【Amount 1】这一列进行合并

我们的代码仅仅只需改动一下第三个参数,将单元格合并应用到amount1这一列就行了

js 复制代码
const spanMethod = rowSpan(tableData,'species',['amount1'])

如果要同时合并,speciesamount1,只需要在数组中同时包含这两个字段就ok

js 复制代码
const spanMethod = rowSpan(tableData,'species',['amount1','species'])

继续上强度

为了说明问题,我们稍微调整下表格数据,新增两条数据

这时候产品的需求是:按照物种,进行性别的单元格合并,也就是说,进行性别单元格合并的前提是他们属于同一物种。

还是一行代码搞定,这时候我们只需要简单的修改一下第二个参数即可

js 复制代码
const spanMethod = rowSpan(tableData,'species.gender',['gender'])

参数很直观,没什么好解释的,如果前提条件不断的堆叠,只需要按照这种格式往后面.就完事。

再上强度,此时,除了性别以外,相同物种的单元格也要进行合并。

兵来将挡,再祭出一个杀器,添加一个高阶函数combie即可,具体实现稍后给出。

js 复制代码
const spanMethod = combine(
  rowSpan(tableData,'species.gender',['gender']),
  rowSpan(tableData,'species',['species'])
)

函数实现


需要依赖lodash的groupBy,有需要请自行安装,或者自己手写实现。

rowSpan

js 复制代码
import {groupBy} from 'lodash';
const rowSpan = (list, spanPath, columnNames) => {
  const rowSpanHandler = (list, handledSpanPath) => {
    if (!handledSpanPath) {
      return
    }
    const spanPathList = handledSpanPath.split('.').filter(Boolean)
    const fieldName = spanPathList.shift()
    const groups = Object.values(groupBy(list , fieldName))
    groups.forEach((group) => {
      group.forEach((item, index) => {
        if (spanPathList.length === 0) {
          const resultPath = spanPath.split('.').join('_')
          if (index === 0) {
            item[`span_${resultPath}`] = [group.length, 1]
          } else {
            item[`span_${resultPath}`] = [0, 0]
          }
        } else {
          rowSpanHandler(group, spanPathList.join('.'))
        }
      })
    })
  }
  rowSpanHandler(list, spanPath)
  return ({ row, column }) => {
    if (columnNames.includes(column.property)) {
      return row[`span_${spanPath.split('.').join('_')}`]
    }
  }
}

combine

js 复制代码
const combine = (...funcArr)=>{
  return ({ row, column })=>funcArr.map(item=>item({row, column})).find(Boolean)
}

结语

整篇文章只介绍了单元格的纵向合并,有需要的请参照贴出来的代码自行实现。

相关推荐
前端开发爱好者3 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀4 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
华仔啊6 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆7 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
岁月宁静8 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
Dolphin_海豚8 小时前
@vue/reactivity
前端·vue.js·面试
菜狗的小小笔记_9 小时前
Vue3 实用技巧
vue.js
勇敢di牛牛12 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
我是日安14 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
Q_Q196328847515 小时前
python+vue的在线租房 房屋租赁系统
开发语言·vue.js·spring boot·python·django·flask·node.js