elementUI table表格动态合并的示例代码
程序员文章站
2023-12-04 16:20:52
1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementui table组件的方法 :span-method="objectspanm...
1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementui table组件的方法 :span-method="objectspanmethod"。官网上看了一下demo,做的很直白,不过不太符合业务。在网上找了篇文章参考了一下
2.效果图如下:
在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。
3.代码:
//合并单元格 二维数组-> 根据“标识”去遍历数据 data() { return { spanarr: [], //遍历数据时,根据相同的标识去存储记录 pos: 0 // 二维数组的索引 } } // methods中定义方法 getspanarr(data) { let that = this //页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱 that.spanarr = [] that.pos = 0 //遍历数据 data.foreach((item, index) => { //判断是否是第一项 if (index === 0) { this.spanarr.push(1) this.pos = 0 } else { //不是第一项时,就根据标识去存储 if (data[index].moldname === data[index - 1].moldname) { // 查找到符合条件的数据时每次要把之前存储的数据+1 this.spanarr[this.pos] += 1 this.spanarr.push(0) } else { // 没有符合的数据时,要记住当前的index this.spanarr.push(1) this.pos = index } } }) console.log(this.spanarr, this.pos) }, // 列表方法 objectspanmethod({rowindex, columnindex}) { // 页面列表上 表格合并行 -> 第几列(从0开始) // 需要合并多个单元格时 依次增加判断条件即可 if (columnindex === 3) { // 二维数组存储的数据 取出 const _row = this.spanarr[rowindex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } //不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false } else { return false } } created() { let data = xxxxxxxxx this.getspanarr(data) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 多广告投放代码 推荐
下一篇: 图片跟随的代码
推荐阅读
-
elementUI table表格动态合并的示例代码
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
-
html+css合并表格边框的示例代码
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
利用js动态添加删除table行的示例代码_javascript技巧
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
css使用table-layout: fixed来设置表格单元格等宽的示例代码
-
JS实现动态修改table及合并单元格的方法示例