--- theme: smartblue highlight: atelier-sulphurpool-light --- 我正在参加「掘金·启航计划」 ## 前言大家好，我是**前端贰货道士**。最近，在处理收单系统的过程中，发现在很多模块，都有使用到表格合并的功能。于是我决定抽出时间，整理下`element`的表格合并思路。**另外，最近苦于自己蹩脚的口才，不懂得如何从生活中去培养和提升自己的幽默细胞，如何成为一个富有高情商的人才。查询未果，烦请大家在评论区给出指点江山的传送门，不胜感激。** 最后，如果本文对您有那么一丝一毫的启发，烦请大家一键三连哦, **蟹蟹大家~** ## 浅析`element`表格合并方法在处理这个问题之前，我们必须得先对`element`的表格合并方法有一个大致的理解和认识：[element官方的表格合并方法](https://element.eleme.cn/#/zh-CN/component/table)。该方法有一个参数，解构出来有四个常用的表格参数，分别是`row`(表格的每行数据), `column`(`element`对列的封装，是一个包含很多信息的对象，其中我们**需要重点关注`property`这个属性，这个属性就是`el-table`组件对应的`el-table-column`所绑定的`prop`值**), `rowIndex`(表格的行索引) 以及`columnIndex`(表格的列索引)。我们可以根据某一列 (使用`columnIndex`进行判断，例：`columnIndex === 0`)，即**针对第一列的每一个小的单元格**, 合并需要合并的行数和列数。而在合并方法中，返回合并数目的形式无非如下两种： - `return [1, 2]` // 长度为2的数组，第一个数为需要合并的行数，第二个数为需要合并的列数，更推荐这种简便的写法 - `return {rowspan: 1, colspan: 2}` // 有两个属性的对象，`rowspan`表示需要合并的行数，`colspan`表示需要合并的列数 **Tips: 在自定义列模板时，虽然官方文档上没有写，但其实我们也可以在`el-table-column`上使用`prop`名称，来指定这一列的`property`**。

## 合并效果镇楼话不多说，先上表格合并的效果图：

## 表格合并规则思路分析(以商品数据为栗) ### 1. 前端需要请求接口，获取并格式化后端返回的商品数据后端给定的数据，往往不是我们最终想要得到的数据。假定后端返回的数据结构是这个样子： ```js data() { return { data: [ { id: 1, chineseName: 'cxk同款卫衣', styleList: [{ styleName: '唱' }, { styleName: '跳' }, { styleName: 'rap' }], sizeList: [{ sizeName: 'M' }] }, { id: 2, chineseName: 'gqq同款兵法', styleList: [{ styleName: 'rap' }, { styleName: '孙子兵法' }], sizeList: [{ sizeName: 'S' }, { sizeName: 'L' }] } ] } } ``` 因为后端逻辑是款式决定尺码，每个款式下都有对应的尺码信息。所以，我们需要对数据进行重构，最终重构的商品数据，是款式和尺码的笛卡尔积。 ```js `格式化后端返回的商品数据：` computed: { finalData() { const data = [] this.data.map((item) => { const { id, chineseName } = item item.styleList.map(({ styleName }) => { item.sizeList.map(({ sizeName }) => { data.push({ id, chineseName, styleName, sizeName }) }) }) }) return data } } ``` 给定`finalData`数据，最终通过`el-table`渲染出来的表格样式如下：

### 2. 必须指定表格关联规则(重点，后续不再赘述) 何为指定表格的关联规则？怎样的关联规则才是一个比较好的规则呢？通过图片不难发现，合并是需要我们把相同的单元项合并到一起。但这往往不能满足我们的真实需求。举栗来说，如果第三行和第四行的款式数据合并到一起，这就是一个错误的合并。**因为我们忽略了一个大前提，那就是相同的单元项必须得是同一件商品。** 所以，对于这个表格来说，`id`相同的`id`列数据，需要合并在一起。**商品名称和商品款式的单元格合并，需要建立在id相同的前提下**，而对于**尺码**列来说, **尺码的单元格合并，需要建立在id相同且款式相同的前提下。** 这就是一个大规则，所以我们希望建立一个映射关系： ```js ` 构建一个二维数组映射关系： 1. 对于最内层数组中的每一项，左边的代表绑定表格的字段名称，右边的代表el-table-column 所绑定的prop值(及每一列的property)所构成的数组，数组中每一项的合并规则都和左边绑定表格的字段名称挂钩； 2. 越往后靠的对象的key值，必须建立在同时满足前面所有key值和本身key值都相同才合并的规则上； 3. 我们还可以对最内层数组进行遍历，给定多个规则且用数组包裹，让不同数组中的字段互不关联； 4. 我们还可以对对象中的每一项添加同级关系的映射关系 ` props: [ [ `相互关联的情况：下层的key值依赖上层所有key值都相同才合并` { id: ['id', 'chineseName'] }, { styleName: ['styleName'] }, { sizeName: ['sizeName'] } ] ] props: [ [ `这个数组中的key值相互关联` { id: ['id', 'chineseName'] }, { styleName: ['styleName'] } ], [ `这个数组中的key值相互关联，与上一个数组中的key值相互独立` { sizeName: ['sizeName'] } ] ] props: [ [ `这个数组中的key值相互关联` { id: ['id', 'chineseName'] }, { `styleName和sizeName为同级关系，都依赖前置key值id` styleName: ['styleName'], sizeName: ['sizeName'] } ] ] ``` - 使用第一个规则的`props`合并的效果(**id、款式、尺码都相同时，才合并尺码单元格**)：

- 使用第二个规则的`props`合并的效果(**尺码相同则合并**)：

### 3. 需要考虑一种比较极端的情况(一般不会出现) 有一种比较极端的情况是，后端返回的数据本身存在错误。比如后端返回了具有相同`id`的数据： ```js data() { return { data: [ { id: 1, chineseName: 'cxk同款卫衣', styleList: [{ styleName: '唱' }, { styleName: '跳' }, { styleName: 'rap' }], sizeList: [{ sizeName: 'M' }] }, { id: 2, chineseName: 'gqq同款兵法', styleList: [{ styleName: '孙子兵法' }], sizeList: [{ sizeName: 'S' }, { sizeName: 'L' }] }, { id: 1, chineseName: 'cxk同款卫衣', styleList: [{ styleName: 'rap' }, { styleName: '跳' }, { styleName: '唱' }], sizeList: [{ sizeName: 'S' }] } ] } } ``` 那么最终通过表格组件渲染出来的数据，会是这样一个效果。很显然，图中用红线圈起来的两条数据是无法合并的，因为它们之间隔了两条数据。所以虽然它们具有相同的`id`，商品名称和款式，但它们是无法通过表格合并规则合并到一起的。

## 封装表格合并公共方法的分步解析 ```js `封装全局$GET方法:` `lodash中的get方法存在一个缺陷：如果取的的字段值为null，就会取null, 而不会拿给定的默认值` import { get } from 'lodash' `在vue的原型对象上挂载$GET方法，这样在取值为null时，就会选择给定的默认值：` Vue.prototype.$GET = window.$GET = (object, path, defaultValue) => { return get(object, path, defaultValue) || defaultValue } ``` ```js import { isPlainObject, isNumber, flatten } from 'lodash' `主方法：` `合并方法共包含三个参数：第一个参数就是element合并方法自带的参数，第二个参数就是绑定的表格数据，第三个参数则是一些配置项。而在第三个参数解构出来的变量中， props: 前文已提及过，用于配置表格合并的映射关系 emptyProp：一般用于表格操作列的字段名称 closSpan：对象，用于配置el-table-column所绑定的prop值对应单元格合并的列数。eg: { chineseName: 5 } ` export function createSpanMethod({ row, column, rowIndex, columnIndex }, data = [], option) { const { props = [], emptyProp = 'done', closSpan = {} } = option `获取每一列的prop值` let { property = 'done' } = column if (!property) property = emptyProp `获取要合并的propert映射的筛选条件` const filterProps = getMappingFilterProp(property, props) `未匹配，则不需要合并单元格` if (!filterProps.length) return [1, 1] `将符合筛选条件的连续数据分组` const splitData = getSplitData(data, row, filterProps) `获取到要合并的条数` const mergeCount = getMergeCount(splitData, rowIndex) let cloCount = 1 `重置column方向合并的条数` if (isPlainObject(closSpan) && isNumber(closSpan[property])) cloCount = closSpan[property] return [mergeCount, cloCount] } ``` ```js `获取筛选条件：第一个参数为该列的property字段，第二个参数为我们传入的props映射关系` `返回结果：为一个包含表格字段的数组，即最内层映射关系的key值所组成的数组` export function getMappingFilterProp(property, props) { let filterProps = [] ;(() => { const len = props.length `因为是二维数组，所以需要进行双重遍历` for (let i = 0; i < len; i++) { let arr = props[i] const len1 = arr.length for (let j = 0; j < len1; j++) { `找到当前的映射对象` let item = arr[j] `判断当前映射对象包含的数组是否存在property字段` `此处用flatten是为了对传入的数组进行扁平化` const isFind = flatten(Object.values(item)).includes(property) `如果不存在，则将映射对象的key值打入filterProps数组中，继续遍历二维数组往下找` if (!isFind) filterProps.push(...Object.keys(item)) `如果存在，则将映射对象的key值打入filterProps数组中，并跳出立即执行函数，直接返回filterProps` `此处用遍历的写法是为了兼容一个映射对象有多个key值的情况, 并只push那一个key值` `如果此时push所有key值，字段就成 && 而不是我们想要的 || 关系了` `比如：a是第一级，b和c是第二级，如果push所有key值，则返回['a', 'b', 'c']` `而我们想要的效果仅仅是['a','b']和['a','c']` else for (let key in item) { if (item[key].includes(property)) return filterProps.push(key) } } `在每次最外层循环之后，置空filterProps数组，开启第二轮循环，达到相互独立的效果` filterProps = [] } })() return filterProps } ``` ```js `获取筛选条件的方法：第一个参数为表格数据，第二个参数为当前表格行数据，第三个参数为我们得到的关联key数组` `返回结果为需要合并的行索引位置的二维数组` export function getSplitData(data, row, filterProps) { let preIndex = -1 let splitData = [] `对表格数据进行遍历，并和当前数据行的关联key数组的每一个值进行比较。如果都相等，则说明这是同一条需要合并的数据` `如果不相等，则表格的这行数据不是我们需要继续合并的位置，则直接return掉，并开始记录下段需要合并的位置数组` data.map((item, index) => { const isSame = filterProps.every((prop) => { const originValue = $GET(item, prop, null) const currentValue = $GET(row, prop, null) if (!originValue || !currentValue) return false return originValue == currentValue }) if (!isSame) return `preIndex表示上次需要合并的行索引的位置` `index-1表示当前行索引-1的位置` `preIndex != index - 1这一步很关键，是处理下图的特殊情况` `这种特殊情况是：假定有3条id为1的数据，有4条id为2的数据，最后有3条id为1的数据` `preIndex != index - 1的作用是判断上次需要合并的行索引位置和当前行索引-1的位置是否相等` `如果相等，则表示是连续的，需要合并的行` `如果不相等，则表示是间断的，则新开一个数组记录这次新的需要合并的行索引的位置` `对应这个特殊情况，最后的执行结果为[[0, 1, 2], [7, 8, 9]]` `开始都是相同的，且preIndex == -1，preIndex == index - 1, 所以执行结果为[[0, 1, 2]]` `到索引为3, 4, 5, 6的时候，发现不是同一条数据了，则直接return掉了` `继续遍历表格，到索引为7的时候，发现 7 != 2 - 1，则push新数组，记录新的合并关系` `最后执行出来得到[[0, 1, 2], [7, 8, 9]]` if (preIndex == -1 || preIndex != index - 1) { splitData.push([]) } preIndex = index `splitData.slice(-1)[0]表示取到最后一个二维数组中的那个一维数组` `并向里面push需要合并的行索引的位置` splitData.slice(-1)[0].push(index) }) return splitData } ```

```js `获取需要合并的行数，第一个参数为二维数组，第二个参数为合并的行索引` export function getMergeCount(splitData, rowIndex) { `对二维数组进行遍历，找到需要合并的行索引的位置` const findData = splitData.find((indexData) => indexData.includes(rowIndex)) `如果找不到，就不需要合并` if (!findData) return 1 `如果找得到，且第一个需要合并的行索引和当前行索引相等，说明这是第一个需要合并的行索引的位置，则合并数组长度个行数据` if (findData[0] == rowIndex) return findData.length `否则，则是后续需要合并的位置，直接返回0即可，因为上面已经做了合并操作` return 0 } ``` ## 公共代码整合及应用实例 ```js import { isPlainObject, isNumber, flatten } from 'lodash' //[{a: [b]}, {c: [d], e: [f]}] [[{a: []}], []] /** * @description: 创建row 合并 * @param {*} row table row * @param {*} column table column * @param {*} rowIndex table rowIndex * @param {Array} data 列表页渲染的数据 * @param {Object} option { * props： [ [ { id: ['combinedInfo', 'createByName', 'createTime', 'done'] }, { combinedColorName: ['combinedColorName'] }] ] ] 二维数组描述row property 中之间的映射关系 closSpan:{ combinedInfo: 5 //重置对应键值合并的clo } * } * @return {Array} span 合并的数组 */ //示例 /** createSpanMethod( { row, column, rowIndex }, this.finalData, { props: [ [{ id: ['combinedInfo', 'createByName', 'createTime', 'done'] }, { combinedColorName: ['combinedColorName'] }] ], closSpan:{ combinedInfo: 5 } }) **/ export function createSpanMethod({ row, column, rowIndex, columnIndex }, data = [], option) { const { props = [], emptyProp = 'done', closSpan = {} } = option let { property = 'done' } = column if (!property) property = emptyProp //获取要合并的propert映射的筛选条件 const filterProps = getMappingFilterProp(property, props) //未匹配，表示未合并的单元格 if (!filterProps.length) return [1, 1] //将符合筛选条件的连续数据分组 const splitData = getSplitData(data, row, filterProps) //获取到要合并的条数 const mergeCount = getMergeCount(splitData, rowIndex) let cloCount = 1 //重置column方向合并的条数 if (isPlainObject(closSpan) && isNumber(closSpan[property])) cloCount = closSpan[property] return [mergeCount, cloCount] } /** * @description: 获取筛选条件 * @param {String} property * @param {Array} props 二维数组筛选所有属性的交集 * @return {Array} */ export function getMappingFilterProp(property, props) { let filterProps = [] ;(() => { const len = props.length for (let i = 0; i < len; i++) { let arr = props[i] const len1 = arr.length for (let j = 0; j < len1; j++) { let item = arr[j] const isFind = flatten(Object.values(item)).includes(property) if (!isFind) filterProps.push(...Object.keys(item)) else return filterProps.push(...Object.keys(item)) } filterProps = [] } })() return filterProps } /** * @description: 按照索引值拆分数组 * @param {Array} data 列表数据 * @param {Object} row * @param {Array} filterProps 筛选列表 * @return {Array} */ export function getSplitData(data, row, filterProps) { let preIndex = -1 let splitData = [] data.map((item, index) => { const isSame = filterProps.every((prop) => { const originValue = $GET(item, prop, null) const currentValue = $GET(row, prop, null) if (!originValue || !currentValue) return false return originValue == currentValue }) if (!isSame) return if (preIndex == -1 || preIndex != index - 1) { splitData.push([]) } preIndex = index splitData.slice(-1)[0].push(index) }) return splitData } /** * @description: 获取row合并的数值 * @param {Array} splitData * @param {Number} rowIndex * @return {Number} */ export function getMergeCount(splitData, rowIndex) { const findData = splitData.find((indexData) => indexData.includes(rowIndex)) if (!findData) return 1 if (findData[0] == rowIndex) return findData.length return 0 } ``` ```js ``` 最终效果：

## 结语 **`jym`**，你们学废了吗？大概就这样吧~