vxe-table 合并单元格合并列

article/2025/9/12 21:03:45

效果如下:
在这里插入图片描述
合并单元格(表头):
:edit-render="{autofocus: '.vxe-input--inner'}"是控制是否可编辑单元格,和:edit-config搭配使用
合并列方法绑定:span-method,具体如下

<vxe-tableref="xTable"borderresizablekeep-sourceshow-overflowalign="center":data="tableData1":scroll-y="{enabled: false}":span-method="rowspanMethod":column-config="{resizable: true, width: 120}":edit-config="isEdit ? {trigger: 'click', mode: 'cell' ,showStatus: true, icon: 'vxe-icon-edit'}:{}"@edit-closed="editClosedEvent"><vxe-colgroup field="a" title="用量分析"><vxe-column field="b" title="业务"><template #default="{ row }"><span style="white-space: break-spaces">{{ row.b }}</span></template></vxe-column><vxe-column field="c" title="参数"><template #default="{ row }"><span style="white-space: break-spaces">{{ row.c }}</span></template></vxe-column><vxe-column field="d" title="业务类型I" /><vxe-colgroup field="e" title="XXX"><vxe-colgroup field="f" title="运营商不明"><vxe-column field="g" title="有ICCID" :edit-render="{autofocus: '.vxe-input--inner'}"><template #edit="{ row }"><vxe-input v-model="row.g" type="text" /></template></vxe-column><vxe-column field="h" title="无ICCID" :edit-render="{autofocus: '.vxe-input--inner'}"><template #edit="{ row }"><vxe-input v-model="row.h" type="text" /></template></vxe-column></vxe-colgroup></vxe-colgroup></vxe-table>

数据结构:

      tableData1: [{ id: 10001, c: '10MB流量(张)', b: `物联网卡(单张卡计费方式)`, d: '生产', e: 'Develop', f: '0', g: '0', h: 1, i: 1 },{ id: 10002, c: '10MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '营销', e: 'Designer', f: '1', g: '0', h: 1, i: 22 },{ id: 10003, c: '10MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '未知', e: 'Test', f: '0', g: '1', h: 1, i: 1 },{ id: 10005, c: '20MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '生产', e: 'Designer', f: '1', g: '1', h: 30, i: 23 },{ id: 10006, c: '20MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '营销', e: 'Designer', f: '1', g: '1', h: 'Develop Develop' },{ id: 10007, c: '20MB流量(张)', b: '物联网卡(单张卡计费方式)', d: '未知', e: 'Designer', f: 'Develop', g: '1', h: 30, i: 23 }],

合并列的方法:
重点理解:若前一行的值与下一行的值数据相同,则合并

    rowspanMethod({ row, _rowIndex, column, visibleData }) {const fields = ['b', 'c']const cellValue = row[column.field] // 单元格的值if (cellValue && fields.includes(column.property)) {const prevRow = visibleData[_rowIndex - 1]let nextRow = visibleData[_rowIndex + 1]if (column.property === 'b') {if (prevRow && prevRow[column.property] === cellValue) {return { rowspan: 0, colspan: 0 }} else {let countRowspan = 1while (nextRow && nextRow[column.property] === cellValue) {nextRow = visibleData[++countRowspan + _rowIndex]}if (countRowspan > 1) {return { rowspan: countRowspan, colspan: 1 }}}} else if (column.property === 'c') {if (prevRow && prevRow[column.property] === cellValue) {return { rowspan: 0, colspan: 0 }} else {let countRowspan = 1while (nextRow && nextRow[column.property] === cellValue) {nextRow = visibleData[++countRowspan + _rowIndex]}if (countRowspan > 1) {return { rowspan: countRowspan, colspan: 1 }}}}}}

http://chatgpt.dhexx.cn/article/5rN7pkVM.shtml

相关文章

element ui 的table单元格合并

element ui中的table表格数据是动态生成的&#xff0c;如果说后台要求我们对单元格进行合并&#xff0c;这个时候需要借助一个api,:span-method"arraySpanMethod",arraySpanMethod为我们自己编写的合并单元格的方法。 下图是我在项目中合并的单元格 数据都是从那后…

element table表格合并行和列

element-ui 官网案例&#xff1a; table合并行或列 通过给table传入span-method方法可以实现合并行或列&#xff0c;方法的参数是一个对象&#xff0c;里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组…

Element_Table的单元格合并

在进行Table的单元格合并的时候&#xff0c;出现了bug&#xff1a;合并第一列的第 x 和 x1 行时&#xff0c;第x2行的数据被第二列的数据替换&#xff0c;之后表格中的数据均向前移动了一格&#xff0c;导致数据展示错乱 分析 在进行单元格合并时&#xff0c;未考虑到动态合并…

el-table 怎么合并相同单元格

问题背景 项目需求table表格中&#xff0c;相同的类型合并成一个单元格展示。 问题描述 el-table并没有相关的语法直接合并&#xff0c;需要我们自己传入一个方法返回一个数组格式&#xff0c;来确定要合并行列。 解决问题 首先需要在 el-table 标签上绑定:span-method&quo…

el-table合并单元格

根据id相同合并单元格 <el-table selection-change"handleSelectionChange" :span-method"objectSpanMethod" :data"tableData" ref"multipleTable" ><el-table-column :selectable"checkSelect" type"sel…

Ant table表格合并单元格使用

Ant 合并单元格覆盖样式 项目需求&#xff1a; 最后一列用来展示详情&#xff0c;表格左侧点击行切换&#xff1b;要求选中行的样式和详情信息用一个边框凸显出来 结果如下&#xff1a; 切换效果展示如下&#xff1a; 实现过程&#xff1a; 在ant合并单元格demo中&#xff…

table 表格合并行或列

合并单元格 <table><tbody><tr><th colspan"2">我是占位符</th><th colspan"2">我是占位符</th></tr><tr><th rowspan"2">我是占位符</th><th>我是占位符</th>&…

Element Table 单元格中嵌套表格(Table) 合并行效果

在Element中实现表格合并行功能一般是通过自定义span-method方法&#xff0c;此方法要求表格数据源中需要合并行的单元格中数据相同&#xff0c;根据相同数据来实现合并算法。 本例通过在父Table单元格中嵌套子Table实现合并行效果&#xff08;也使用了span-method方法&#x…

Html Table 合并单元格

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title> </head> <body> <ol><li>基本表格</li><table border"2" bordercolor"black" …

使用原生table合并单元格

先上个我要实现的页面 例子1&#xff1a; 就是最近要开发这么一个页面&#xff08;这是个原型图&#xff0c;没有美化&#xff0c;大概是这个样子也都懂&#xff09;&#xff0c;刚看到的时候说实话有点儿懵的&#xff0c;第一次见到这样的表格&#xff0c;可以看到里面有很多…

el-table 合并单元格(合并行)

1. 添加 :span-method"objectSpanMethod" 2. 写objectSpanMethod 方法 //#region 合并单元格// 这个方法是 element-ui提供的单元格合并方法// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }// row: 当前行// column: 当前列// rowIndex&…

table表格 ---合并单元格

1、合并表头 第一种方法 利用table的 :header-cell-style属性 <el-table:data"tableData"height"400px"max-height"400px"size"small":header-cell-style"headerStyle"fit > methods: {headerStyle({ row, rowIndex …

table表格单元格的合并详解

1.html实现表格 <el-tablemax-height"300":columns"columns":data"tableData":show-index"false":span-method"objectSpanMethod":header-cell-style"{ background: #eef0f6 }" /> 2.记录每个字段合并数的…

table表格--合并单元格

知识点概要&#xff1a; 1、colpan:横向合并"n"个单元格--n:默认1 2、rowspan:纵向合并"n"个单元格--n:默认1 代码demo&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo…

table表格中单元格的合并

目录 table表格中单元格的合并 table表格中单元格的合并很多朋友不一定了解&#xff0c;今天我就写一篇博客来跟大家分享一下table表格中的跨行合并和跨列合并。 我们先看一个合并过的表格&#xff0c;大家可以先思考一下这种表格通过代码是怎么实现的。 解析&#xff1a;我们…

类型“HTMLElement”上不存在属性“getContext”

ts警告&#xff1a;类型“HTMLElement”上不存在属性“getContext” 修改代码如下&#xff1a; const state reactive({canvasDom: null as HTMLCanvasElement | null,canvasCtx: null as CanvasRenderingContext2D | null, });onMounted(() > {state.canvasDom <HTML…

“TypeError: Cannot read properties of null (reading ‘getContext‘)“

目录 一、报错截图 二、使用场景 三、代码截图 四、报错原因 五、解决办法 一、报错截图 二、使用场景 第一次在vue项目种使用canvas&#xff0c;跟着网上教程做&#xff0c;标签canvas写好了&#xff0c;dom元素获取了&#xff0c;简单“画”了一下&#xff0c;运行之后报…

setcontext getcontext makecontext swapcontext

Linux上下文切换以及协程 上下文切换&#xff0c;听起来虚无缥缈&#xff0c;什么是上下文&#xff0c;切换又是指的是什么&#xff1f;其实上下文就可以理解为一个进程所运行的相关的寄存器值&#xff0c;即包括sp/bp/pc等值&#xff0c;换句话说&#xff0c;一个上下文&#…

android之getContext和getActivity介绍

image.png getContext View类中提供的方法&#xff0c;在继承了View的类中才可以调用。 返回的是当前View运行在哪个Activity Contex中&#xff0c;获取当前context的实例。 如果使用场景是Activity则相当于 this&#xff0c;如果使用场景是一个Server 那么获取的实例就是一个A…

sws_getContext函数详细使用

成功后返回SwsContext 类型的结构体。 参数1&#xff1a;被转换源的宽 参数2&#xff1a;被转换源的高 参数3&#xff1a;被转换源的格式&#xff0c;eg&#xff1a;YUV、RGB……&#xff08;枚举格式&#xff0c;也可以直接用枚举的代号表示eg&#xff1a;AV_PIX_FMT_YUV42…