template部分

<el-table :data="tableData" :span-method="objectSpanMethod" border height="100%"><el-table-column prop="WF_NODE_ID" label="节点" show-overflow-tooltip min-width="180"> </el-table-column><el-table-column prop="TASK_USER_ID" label="人员" show-overflow-tooltip min-width="180"> </el-table-column><el-table-column prop="TASK_REC_DT" label="接收时间" show-overflow-tooltip min-width="200"> </el-table-column><el-table-column prop="TASK_ACT_DT" label="操作时间" show-overflow-tooltip min-width="200"> </el-table-column><el-table-column prop="TASK_USER_COMMENT" label="意见" show-overflow-tooltip min-width="200"> </el-table-column>
</el-table>

methods部分

objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {// this.tableData  修改const _row = this.flitterData(this.tableData).one[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col,}}
},
flitterData(arr) {let spanOneArr = []let concatOne = 0arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1)} else {//name 修改if (item.name === arr[index - 1].name) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.push(0)}else {spanOneArr.push(1)concatOne = index}}})return {one: spanOneArr,}
},

效果图：

element ui 第一列相同数据相同合并单元格相关推荐

elementui table 第一列内容相同自动合并单元格 el-table第一列内容相同自动合并
template( :span-method="objectSpanMethod") <el-table:data="tableD ...
aspose 换行写_Aspose.Cells 首次使用，用到模版填充数据，合并单元格，换行
Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 image 图2 ,注意看红色部分,一对一是正常的,但是有 ...
表格控件DHTMLX Spreadsheet 5.0版本重大更新，新增搜索和过滤数据、合并单元格、自动宽度功能
DHTMLX Spreadsheet是用纯JavaScript编写的开源电子表格小部件,可让您快速在网页上添加类似于Excel的可编辑数据表.高度可定制的JavaScript电子表格组件,具有优雅的M ...
【openpyxl】操作单元格，获取单个或多个单元格并修改数据、合并单元格、删除行列、移动单元格
1.获取和修改单个单元格 from openpyxl import Workbook wb = Workbook() ws = wb.activecell = ws["a6"] # ...
【HTML】Angular JS + Table 根据数据动态合并单元格
问题描述: 根据数据值将单元格合并如一级指标二级指标原始演示效果: 目标效果如图所示: 完整的http.post请求JS $http.post('../hnTProF3c/List', para ...
Easyui数据表格合并单元格
合并与不合并的数据在同一个表中: $('#table_id').datagrid({title: '标题',collapsible: true,singleSelect:true,nowrap: tr ...
poi导出excel，行相同数据自动合并单元格
/***excel行自动合并*listData 待导出数据*/ public void test(SXSSFSheet sheet,List<FanManagerExt> listData ...
el-table合并一列中数据相同的单元格
html相关代码即普通的ElementUI的表格插件传入span-method方法: <el-table :data="tableData" border class=&q ...
vue + elementui table 列内容相同自动合并单元格完整代码
效果图 <el-table :data="gridData" border class="det-div" :span-method="obje ...

element ui 第一列相同数据相同合并单元格

template部分

methods部分

效果图：

element ui 第一列相同数据相同合并单元格相关推荐

最新文章

热门文章