基本用法见官网地址：element-plus.gitee.io/zh-CN/compo…
实际应用中还需要我们对数据进行处理。这里有篇文章写的很好，是根据数据是否一样来进行合并的。blog.csdn.net/qq_29468573…
这篇文章只处理了一列，下面我们可以对其他列进行合并。
<template> <div> <el-table :data="[ { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 1, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 2, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 3, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 4, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 5, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 6, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 7, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 8, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 9, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 10, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 11, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 12, }, ]" :span-method="objectSpanMethod" style="width: 100%; margin-top: 20px" :border="true"> <el-table-column prop="id" label="ID" width="180" /> <el-table-column prop="name" label="Name" /> <el-table-column prop="amount1" label="Amount 1" /> <el-table-column prop="amount2" label="Amount 2" /> <el-table-column prop="amount3" label="Amount 3" /> </el-table> </div></template><script lang="ts">import { defineComponent, onMounted, toRefs, reactive} from 'vue'export default defineComponent({ setup(props) { let state = reactive({ spanArr: [[], [], [], [], []] as any, }) const getSpanArr = (data: any = [], props: any) => { let pos: any = [] props = props || Object.keys(data[0] || {}) for (var i = 0; i < data.length; i++) { if (i === 0) { state.spanArr[0].push(1); state.spanArr[1].push(1); state.spanArr[2].push(1); state.spanArr[3].push(1); state.spanArr[4].push(1); pos[0] = 0 pos[1] = 0 pos[2] = 0 pos[3] = 0 pos[4] = 0 } else { // 判断当前元素与上一个元素是否相同 if (data[i].id === data[i - 1].id) { state.spanArr[0][pos[0]] += 1; state.spanArr[0].push(0); } else { state.spanArr[0].push(1); pos[0] = i; } if (data[i].name === data[i - 1].name) { state.spanArr[1][pos[1]] += 1; state.spanArr[1].push(0); } else { state.spanArr[1].push(1); pos[1] = i; } if (data[i].amount1 === data[i - 1].amount1) { state.spanArr[2][pos[2]] += 1; state.spanArr[2].push(0); } else { state.spanArr[2].push(1); pos[2] = i; } if (data[i].amount2 === data[i - 1].amount2) { state.spanArr[3][pos[3]] += 1; state.spanArr[3].push(0); } else { state.spanArr[3].push(1); pos[3] = i; } if (data[i].amount3 === data[i - 1].amount3) { state.spanArr[4][pos[4]] += 1; state.spanArr[4].push(0); } else { state.spanArr[4].push(1); pos[4] = i; } } } } const objectSpanMethod = ({ row, column, rowIndex, columnIndex, }: any) => { console.log(row, column, rowIndex, columnIndex); if (columnIndex === 0) { const _row = state.spanArr[0][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } if (columnIndex === 1) { const _row = state.spanArr[1][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } if (columnIndex === 2) { const _row = state.spanArr[2][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } if (columnIndex === 3) { const _row = state.spanArr[3][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } if (columnIndex === 4) { const _row = state.spanArr[4][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } return { rowspan: 1, colspan: 1 } } onMounted(() => { getSpanArr([ { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 1, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 2, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 3, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 4, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 5, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 6, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 7, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 8, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 9, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 10, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 11, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 12, }, ], null) }) return { objectSpanMethod, ...toRefs(state), } }})</script>
以上是最简单的写法，通过观察可以发现规律，于是可以通过索引简化下。
<template> <div> <el-table :data="[ { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 1, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 2, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 3, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 4, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 5, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 6, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 7, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 8, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 9, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 10, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 11, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 12, }, ]" :span-method="objectSpanMethod" style="width: 100%; margin-top: 20px" :border="true"> <el-table-column prop="id" label="ID" width="180" /> <el-table-column prop="name" label="Name" /> <el-table-column prop="amount1" label="Amount 1" /> <el-table-column prop="amount2" label="Amount 2" /> <el-table-column prop="amount3" label="Amount 3" /> </el-table> </div></template><script lang="ts">import { defineComponent, onMounted, toRefs, reactive} from 'vue'export default defineComponent({ setup(props) { let state = reactive({ spanArr: [[], [], [], [], []] as any, }) const getSpanArr = (data: any = [], props: any) => { let pos: any = [] props = props || Object.keys(data[0] || {}) for (var i = 0; i < data.length; i++) { if (i === 0) { props?.map((item: any, index: any) => index)?.forEach((item: any) => { state.spanArr[item].push(1); pos[item] = 0 }) } else { // 判断当前元素与上一个元素是否相同 props?.map((item: any) => item)?.forEach((item: any, index: any) => { if (data[i][item] === data[i - 1][item]) { state.spanArr[index][pos[index]] += 1; state.spanArr[index].push(0); } else { state.spanArr[index].push(1); pos[index] = i; } }) } } } const objectSpanMethod = ({ row, column, rowIndex, columnIndex, }: any) => { let arr = ['id', 'name', 'amount1', 'amount2', 'amount3'] for (var i = 0; i < arr.length; i++) { if (columnIndex == i) { const _row = state.spanArr[i][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } } } onMounted(() => { getSpanArr([ { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 1, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 2, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 3, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 4, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 5, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 6, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 7, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 8, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 9, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 10, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 11, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 12, }, ], null) }) return { objectSpanMethod, ...toRefs(state), } }})</script>
具体哪一列需要合并我们可以通过getSpanArr的第二个参数传入。
<template> <div> <el-table :data="[ { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 1, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 2, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 3, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 4, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 5, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 6, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 7, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 8, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 9, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 10, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 11, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 12, }, ]" :span-method="objectSpanMethod" style="width: 100%; margin-top: 20px" :border="true"> <el-table-column prop="id" label="ID" width="180" /> <el-table-column prop="name" label="Name" /> <el-table-column prop="amount1" label="Amount 1" /> <el-table-column prop="amount2" label="Amount 2" /> <el-table-column prop="amount3" label="Amount 3" /> </el-table> </div></template><script lang="ts">import { defineComponent, onMounted, toRefs, reactive} from 'vue'export default defineComponent({ setup(props) { let state = reactive({ spanArr: [[], [], [], [], []] as any, keys: [] as any }) const getSpanArr = (data: any = [], keys: any) => { let pos: any = [] keys = keys || (Object.keys(data[0] || {}))?.map((item, index) => ({ keyName: item, colIndex: index })) state.keys = keys for (var i = 0; i < data.length; i++) { if (i === 0) { keys?.forEach((item: any) => { state.spanArr[item.colIndex].push(1); pos[item.colIndex] = 0 }) } else { // 判断当前元素与上一个元素是否相同 keys?.forEach((item: any) => { if (data[i][item.keyName] === data[i - 1][item.keyName]) { state.spanArr[item.colIndex][pos[item.colIndex]] += 1; state.spanArr[item.colIndex].push(0); } else { state.spanArr[item.colIndex].push(1); pos[item.colIndex] = i; } }) } } } const objectSpanMethod = ({ row, column, rowIndex, columnIndex, }: any) => { let arr = state.keys for (var i = 0; i < arr.length; i++) { if (columnIndex == arr[i].colIndex) { const _row = state.spanArr[arr[i].colIndex][rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } } } onMounted(() => { getSpanArr([ { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 1, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 2, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '32', amount3: 3, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 4, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 5, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '22', amount3: 6, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 7, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 8, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '12', amount3: 9, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 10, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 11, }, { id: '12987122', name: 'Tom', amount1: '234', amount2: '2', amount3: 12, }, ], // [{ keyName: 'name', colIndex: 1 }, { keyName: 'amount2', colIndex: 3 }, { keyName: 'amount3', colIndex: 4 }] [{ keyName: 'id', colIndex: 0 }, { keyName: 'name', colIndex: 1 }, { keyName: 'amount1', colIndex: 2 }, { keyName: 'amount2', colIndex: 3 }, { keyName: 'amount3', colIndex: 4 }] ) }) return { objectSpanMethod, ...toRefs(state), } }})</script>
下边这篇文章跟我思路差不多可以参考。blog.csdn.net/qq_28254093…
