前言
在后台管理系统中，经常有合并单元格的需求。
所以为了提高后续的开发效率，就开发了一款插件插件：@jinming6/merge-helper
合并 “ 行 ”
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /></head><body><div id="app"><el-table border :data="tableData" :span-method="spanMethod"><el-table-column label="序号" :prop="SORT_NO_KEY"></el-table-column><el-table-column label="姓名" prop="name"></el-table-column><el-table-column label="年龄" prop="age"></el-table-column><el-table-column label="省份" prop="provinces"></el-table-column></el-table></div><script src="//unpkg.com/vue@3"></script><script src="//unpkg.com/element-plus"></script><script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script><script src="https://unpkg.com/@jinming6/merge-helper@1.2.1/dist/mergeHelper.js"></script><script>const { createApp, ref, onMounted } = Vue;const { getMergedData, Mode, getFieldSpan, constants } = window['@jinming6/mergeHelper']const { SORT_NO_KEY } = constantsconst app = createApp({setup() {const tableData = ref([])const getTableData = () => {const data = [{name: '张三',age: 18,provinces: '山东省'},{name: '张三',age: 18,provinces: '山东省'},{name: '李四',age: 18,provinces: '山东省'},{name: '王五',age: 20,provinces: '江苏省'},]const options = {mode: Mode.Row,dataSource: data,mergeFields: [{field: 'name',callback(curItem, nextItem) {return curItem.name === nextItem.name}}, 'age', 'provinces'],genSort: true,}const mergedData = getMergedData(options)tableData.value = mergedData;console.log(mergedData)}const spanMethod = ({ row, columnIndex }) => {if (columnIndex <= 1) {return getFieldSpan(row, 'name');}if (columnIndex === 2) {return getFieldSpan(row, 'age');}if (columnIndex === 3) {return getFieldSpan(row, 'provinces');}return {rowspan: 1,colspan: 1,};}onMounted(() => {getTableData()})return {tableData,spanMethod,SORT_NO_KEY}}})app.use(ElementPlus)app.mount('#app')</script></body></html>合并 “ 列 ”
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /></head><body><div id="app"><el-table border :data="tableData" :span-method="spanMethod"><el-table-column label="序号" type="index" width="80"></el-table-column><el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop":type="item.type" :width="item.width" align="center"></el-table-column></el-table></div><script src="//unpkg.com/vue@3"></script><script src="//unpkg.com/element-plus"></script><script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script><script src="https://unpkg.com/@jinming6/merge-helper@1.2.1/dist/mergeHelper.js"><script>const { createApp, ref, onMounted } = Vue;const { getMergedData, Mode, getFieldSpan, constants } = window['@jinming6/mergeHelper']const { SORT_NO_KEY } = constantsconst app = createApp({setup() {const tableData = ref([])const columns = [{label: '姓名',prop: 'name'},{label: '年龄',prop: 'age'},{label: '省份',prop: 'provinces'},{label: '市',prop: 'city'},{label: '区/县',prop: 'county'},]const getTableData = () => {const data = [{name: '张三',age: 18,provinces: '山东省',city: '青岛市',county: '崂山区'},{name: '李四',age: 20,provinces: '北京市',city: '北京市',county: '北京市'},{name: '王五',age: 21,provinces: '江苏省',city: '南京市',county: '雨花台区'},{name: '马六',age: 22,provinces: '上海市',city: '上海市',county: '上海市'},]const options = {mode: Mode.Col,dataSource: data,mergeFields: columns.map((item) => item.prop),columns}const mergedData = getMergedData(options)tableData.value = mergedData;}const spanMethod = ({ row, column }) => getFieldSpan(row, column.property)onMounted(() => {getTableData()})return {columns,tableData,spanMethod,SORT_NO_KEY}}})app.use(ElementPlus)app.mount('#app')</script></body></html>