elementui的table根据是否符合需求合并列的实现代码
更新时间:2024年03月27日 12:23:05 作者:EstherNi
这篇文章主要介绍了elementui的table根据是否符合需求合并列的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
elementui的table根据是否符合需求合并列
<el-table :data="tableData" border style="width: 100%;" :span-method="objectSpanMethodAuto"> <!-- 空状态 --> <template slot="empty"> <div><img src="http://9i0i.com/pic.php?p=@/assets/images/noData.png" /></div> <span>暂无数据</span> </template> <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column> <el-table-column label="年度" align="center" prop="year"> </el-table-column> <el-table-column prop="regionName" label="行政区划" align="center"> </el-table-column> <el-table-column align="center"> <template slot="header"> <div class="header-con">(万人)</div> <div class="header-name">农业人口数量</div> </template> <template slot-scope="scope"> <div>{{ scope.row.ruralPopNum }}</div> </template> </el-table-column> <el-table-column align="center"> <template slot="header"> <div class="header-con">(万人)</div> <div class="header-name">城镇人口数量</div> </template> <template slot-scope="scope"> <div>{{ scope.row.urbanPopNum }}</div> </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="{ row }"> <el-button type="text" size="small" class="operation" style="color: #2372ed;" @click="handleEditTable(row)">编辑</el-button> <el-button type="text" size="small" class="operation" style="color: #2372ed;" @click="handleDelete(row)">删除</el-button> </template> </el-table-column> </el-table>
data: function () { return { spanArr:[], tableData:[] } }
getList() { getPopList(this.query).then((res) => { this.totalCount = res.total; this.tableData = res.rows; let contactDot = 0; let spanArr = []; this.tableData.forEach((item, index) => { if (index === 0) { console.log(spanArr); spanArr.push(1); } else { if (item.year === this.tableData[index - 1].year) { spanArr[contactDot] += 1; spanArr.push(0); } else { contactDot = index; spanArr.push(1); } } }); this.spanArr = spanArr; }); },
// 合并行 objectSpanMethodAuto({ row, column, rowIndex, columnIndex }) { console.log("点击:", row, column, rowIndex, columnIndex); if (columnIndex == 1 || columnIndex == 5) { if (this.spanArr[rowIndex]) { return { rowspan: this.spanArr[rowIndex], colspan: 1, }; } else { return { rowspan: 0, colspan: 0, }; } } },
到此这篇关于elementui的table根据是否符合需求合并列的文章就介绍到这了,更多相关elementui的table合并列内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
vue中国城市选择器的使用教程(element-china-area-data)
这篇文章主要给大家介绍了关于vue中国城市选择器使用(element-china-area-data)的相关资料,使用element-china-area-data插件可以非常方便地实现省市县三级联动选择器,需要的朋友可以参考下2023-11-11
最新评论