el-table使用span-method合并行

最新推荐文章于 2024-05-24 11:40:21 发布
最新推荐文章于 2024-05-24 11:40:21 发布
阅读量323 收藏 1
点赞数
文章标签： javascript elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangzhi_/article/details/120196789
版权
本文详细介绍了在Vue.js中如何使用`el-table`组件结合`span-method`属性实现表格行的动态合并。通过遍历数据，比较相邻行的特定字段，设置合并标记并计算合并行数。实例展示了在表格中根据`levelName1`、`levelName2`、`levelName3`和`weight`字段进行行合并的方法，适用于数据展示优化和表格美化。
摘要由CSDN通过智能技术生成

el-table使用span-method合并行

1、html页面

<el-table height="650" :data="skuListInfo" ref="tableData" border :span-method="objectSpanMethod" :header-cell-style="{background:'#deebff',color:'#606266',fontWeight:'bold',textAlign:'center'}" highlight-current-row>
	<el-table-column prop="deptName" align="center" label="序号" min-width="30">
		<template slot-scope='scope'>
			{{scope.row.tableSort}}
	    </template>
	</el-table-column>
	<el-table-column prop="levelName1" align="center" label="重点工作" min-width="80">
		<template slot-scope='scope'>
		{{scope.row.levelName1}}
		</template>
    </el-table-column>
    <el-table-column prop="levelName2" align="center" label="主要项目" min-width="200">
    	<template slot-scope='scope'>
    	{{scope.row.levelName2}}
    	</template>
   	</el-table-column>
   	<el-table-column prop="levelName3" align="center" label="具体内容" min-width="180">
	   	<template slot-scope='scope'>
	   	{{scope.row.levelName3 ? scope.row.levelName3 : '\\'}}
	   	</template>
   	</el-table-column>
   	<el-table-column prop="unitVal" align="center" label="单位" min-width="50">
   		<template slot-scope='scope'>
   		{{scope.row.unitVal}}
   		</template>
   	</el-table-column>
   	<el-table-column prop="dataTotal" align="center" label="数据" min-width="90">
   		<template slot-scope='scope'>
   			<el-input v-model="scope.row.dataTotal" @input="dataTotalChange(scope.row, 'dataTotal', 'targetTotal', scope.$index)" @keyup.native="proving($event)" :disabled="!isEdit"></el-input>
   		</template>
   	</el-table-column>
   	<el-table-column prop="dataTotal" align="center" label="大屏数据" min-width="70" v-if="isAdmin">
   		<template slot-scope='scope'>
   			<el-input v-model="scope.row.bigDataTotal" @input="dataTotalChange(scope.row, 'bigDataTotal', 'bigTargetTotal', scope.$index)" @keyup.native="proving($event)" :disabled="!isAdmin"></el-input>
   		</template>
   	</el-table-column>
   	<el-table-column prop="weight" align="center" label="权重" min-width="60" v-if="isAdmin">
   		<template slot-scope='scope'>
   			<div >{{scope.row.weight ? (scope.row.weight + '%') : '\\'}}</div>
   		</template>
   	</el-table-column>
   	<el-table-column prop="baseTotal" align="center" label="基数" min-width="60" v-if="isAdmin">
   		<template slot-scope='scope'>
   			<div >{{scope.row.baseTotal}}</div>
   		</template>
   	</el-table-column>
   	<el-table-column prop="targetTotal" align="center" label="指标数" min-width="60" v-if="isAdmin">
   		<template slot-scope='scope'>
   			<div>{{scope.row.targetTotal ? scope.row.targetTotal + '%' : ''}}</div>
   		</template>
   	</el-table-column>
   	<el-table-column prop="bigTargetTotal" align="center" label="大屏指标数" min-width="60" v-if="isAdmin">
   		<template slot-scope='scope'>
   			<div>{{scope.row.bigTargetTotal ? scope.row.bigTargetTotal + '%' : ''}}</div>
   		</template>
   	</el-table-column>
   	<el-table-column prop="caliberContent" align="left" label="填报口径说明" min-width="150">
   		<template slot-scope='scope'>
   			<span v-html="scope.row.caliberContent">{{scope.row.caliberContent}}</span>
   		</template>
   	</el-table-column>
</el-table>

2、javascript部分

<script>
export default {
	data() {
		return {
			skuListInfo: [
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207041"
					levelName1: "组织党员干部自学"
					levelName2: "参加学习党员人数"
					levelName3: ""
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207042"
					levelName1: "组织党员干部自学"
					levelName2: "参加学习县处级以上党员干部人数"
					levelName3: ""
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207043"
					levelName1: "组织党员干部自学"
					levelName2: "所属基层党组织数量"
					levelName3: ""
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa79040hjk7207123"
					levelName1: "组织党员干部自学"
					levelName2: "发放教材、笔记本等资料数量"
					levelName3: ""
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207044"
					levelName1: "开展专题学习"
					levelName2: "党委(党组)理论学习中心组学习情况"
					levelName3: "本级专题学习次数"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207045"
					levelName1: "开展专题学习"
					levelName2: "党委(党组)理论学习中心组学习情况"
					levelName3: "下属各级专题学习次数"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207046"
					levelName1: "开展专题学习"
					levelName2: "基层党组织开展学习党史主题党日活动情况"
					levelName3: "开展主题党日活动的基层党组织数量"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207047"
					levelName1: "开展专题学习"
					levelName2: "基层党组织开展学习党史主题党日活动情况"
					levelName3: "开展主题党日活动的数量"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207048"
					levelName1: "开展专题学习"
					levelName2: "领导干部讲专题党课数量"
					levelName3: "市厅级领导干部讲专题党课数量"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207049"
					levelName1: "开展专题学习"
					levelName2: "领导干部讲专题党课数量"
					levelName3: "县处级领导干部讲专题党课数量"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				},
				{
					baseTotal: null
					bigDataTotal: null
					bigTargetTotal: null
					dataTotal: null
					id: "aa790401jk7207050"
					levelName1: "开展专题学习"
					levelName2: "领导干部讲专题党课数量"
					levelName3: "基层党组织书记讲专题党课数量"
					levelName4: ""
					targetTotal: null
					unitVal: "人"
					weight: 40
				}
			],
			typeNameArr: [],
	      	typeNamePos: 0,
	      	storeArr: [],
	      	storePos: 0,
	      	feeArr: [],
	      	feePos: 0,
	      	weightArr: [],
	      	weightPos: 0
		}
	},
	mounted() {
		this.merage()
	},
	methods: {
	  merageInit() {
      this.typeNameArr = []
      this.typeNamePos = 0
      this.storeArr = []
      this.storePos = 0
      this.feeArr = []
      this.feePos = 0
      this.weightArr = []
      this.weightPos = 0
    },
    merage() {
      this.merageInit()
      this.tableSort = 1
      for (let i = 0; i < this.skuListInfo.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.typeNameArr.push(1)
          this.typeNamePos = 0
          this.storeArr.push(1)
          this.storePos = 0
          this.feeArr.push(1)
          this.feePos = 0
          this.weightArr.push(1)
          this.weightPos = 0
          this.skuListInfo[i].tableSort = this.tableSort
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
          // 第一二列
          // eslint-disable-next-line no-lonely-if
          if (this.skuListInfo[i].levelName1 === this.skuListInfo[i - 1].levelName1) {
            this.typeNameArr[this.typeNamePos] += 1
            this.skuListInfo[i].tableSort = this.tableSort
            this.typeNameArr.push(0)
          } else {
            this.tableSort += 1
            this.skuListInfo[i].tableSort = this.tableSort
            this.typeNameArr.push(1)
            this.typeNamePos = i
          }
          // 第三列
          if (this.skuListInfo[i].levelName2 === this.skuListInfo[i - 1].levelName2 && this.skuListInfo[i].levelName1 ===
              this.skuListInfo[i - 1].levelName1) {
            this.storeArr[this.storePos] += 1
            this.storeArr.push(0)
          } else {
            this.storeArr.push(1)
            this.storePos = i
          }
          // 第四列
          if (this.skuListInfo[i].levelName3 === this.skuListInfo[i - 1].levelName3 && this.skuListInfo[i].levelName2 ===
              this.skuListInfo[i - 1].levelName2 && this.skuListInfo[i].levelName1 ===
              this.skuListInfo[i - 1].levelName1) {
            this.feeArr[this.feePos] += 1
            this.feeArr.push(0)
          } else {
            this.feeArr.push(1)
            this.feePos = i
          }
          // 第七列
          if (this.skuListInfo[i].weight && this.skuListInfo[i].weight === this.skuListInfo[i - 1].weight) {
            if ((this.skuListInfo[i].levelName1 === this.skuListInfo[i - 1].levelName1) && (this.skuListInfo[i].levelName1 === '组织专题培训' || this.skuListInfo[i].levelName1 === '组织专题宣讲' || this.skuListInfo[i].levelName1 === '开展“我为群众办实事”实践活动' || this.skuListInfo[i].levelName1 === '流动党员学习教育')) {
              this.weightArr[this.weightPos] += 1
              this.weightArr.push(0)
            } else if (this.skuListInfo[i].levelName3) {
              if (this.skuListInfo[i].levelName2 === this.skuListInfo[i - 1].levelName2) {
                this.weightArr[this.weightPos] += 1
                this.weightArr.push(0)
              } else {
                this.weightArr.push(1)
                this.weightPos = i
              }
            } else {
              this.weightArr.push(1)
              this.weightPos = i
            }
          } else {
            this.weightArr.push(1)
            this.weightPos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const lastColumnIndex = this.isAdmin ? 11 : 6
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === lastColumnIndex) {
        if (this.skuListInfo.length - rowIndex === 1) {
          return [0, 0]
        }
        // 第一二列的合并方法
        const row1 = this.typeNameArr[rowIndex]
        const col1 = row1 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1
        }
      } else if (columnIndex === 2) {
        if (this.skuListInfo.length - rowIndex === 1) {
          return [1, 0]
        }
        // 第三列的合并方法
        const row2 = this.storeArr[rowIndex]
        const col2 = row2 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2
        }
      } else if (columnIndex === 3) {
        // 第四列的合并方法
        const row3 = this.feeArr[rowIndex]
        const col3 = row3 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row3,
          colspan: col3
        }
      } else if (columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10) {
        const row4 = this.weightArr[rowIndex]
        const col4 = row4 > 0 ? 1 : 0
        return {
          rowspan: row4,
          colspan: col4
        }
      }
    },
}
}
</script>

3、效果图
在这里插入图片描述

pangzhi_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table span-method动态合并行
Wline
11-06 819
最近项目中需要用到table 动态合并行，官方文档给出的方法是固定合并不是动态的但是大致思路算是给出来了，开干。。。 效果是这样的额 //table展示 <el-table :data="dataList" border :span-method="spanMethod"> <el-table-column prop="name" label="第一列" ></el-table-column> <el-table-column pro
element-ui表格合并span-method的实现方法
10-16
<el-table :data="tableData6" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" label="姓名...
使用VUE的el-table标签的_span-method=_arraySpanMethod_合并列中重复的单元格.md
03-18
使用VUE的 :span-method="arraySpanMethod"进行表中单元格的合并，在js文件中进行具体的操作。
【亲测有效】element-ui table :span-method（行数和列数合并）
qq_40615333的博客
06-30 6779
【最新最详细】element-ui table :span-method（行数和列数合并）element-ui官网中关于行合并的例子是根据行索引进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些改造以达到我们要实现的需求。 首先，我们来解读一下官网实例中的各个参数的意义： 研究这个实例后不难发现，实现合并行的方法其实在每一行数据渲染的时候都会执行，只不过在渲染过程中我们设置了它合并的行数和列数，以得到不同的效果。对于合并行数和列数，我认为有两种场景。我是以
图文解析注释el-table中自定义合并单元格的方法 :span-method
最新发布
weixin_49250653的博客
05-24 343
让我们看看实际开发的效果图（
el-table :span-method 行合并
bidepanm的博客
07-13 515
el-table行合并
el-table的span-method合并行方法
m0_61585720的博客
08-22 552
【代码】el-table的span-method合并行方法。
[element-ui] el-table表格合并 span-method
qq_14993591的博客
08-14 563
【代码】[element-ui] el-table表格合并 span-method。
Vue+Element-UI el-table表格根据指定条件动态合并行span-method
misschengispink的博客
03-26 1494
el-table标签上定义span-method方法methods里增加spanMethod方法return {rowspan: row.rowspan, // 需要合并的行数colspan: 1} else {// 不合并return {colspan: 0。
element-ui table span-method(行合并)的实现代码
10-17
总之，Element UI的`el-table`组件通过`span-method`属性提供了高度灵活的单元格合并功能。只要正确处理数据和实现合并逻辑，就能够实现动态、自适应的表格行和列合并，从而满足复杂的数据展示需求。
实际使用el-table中的span-method（合并行或列）方法的案例
rookien_的博客
01-23 5090
根据判断来写//第一列//行属性中rowspan存在，并且大于等于1的，开始合并return {rowspan: row.rowspan, //合并的行数colspan: 1 //合并的列数} else {//不合并，以下写法等于不操作任何return {colspan: 0},以上就是我工作遇到合并行的实例，和我的解决办法此外span-method方法中合并的行列可以写成return[row.rowspan,1]、return[0,0]。
vue实用demo使用表格(el-table)的span-method属性实现表格行合并
点燃火柴的博客
05-16 3845
1 demo效果 如上图实现表格中性别这一列实现行合并 2 实现要点
element-ui table :span-method（行合并）
qq_35271254的博客
11-06 336
原文链接：https://blog.csdn.net/qq_29468573/article/details/80742646
element用法总结
香蕉你个芭呐呐的博客
12-23 3070
表格合并单元格 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 如下：合并列 html...
el-table多行合并
weixin_41127362的博客
04-16 1946
我使用了一种笨方法实现了需求。主要是理解思路很重要。后面所有类型应该都能理解。
element ui table表格中 span-method的用法
KingShy1的博客
09-30 3709
前景：前天突然接到一个蓝湖，上面需要动态添加数据到表格中，并且要实现一对多的数据，在网上找了一些，看到了表格中还有一个span-method的属性可以实现合并表格，写完之后来总结一下。 官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的序号 代码如下： // 动态和并的操
element-ui表格动态合并span-method
小码蚁
06-06 3492
官方文档简单说明： /** * 表格合并 * @param {*} param0 * row 表格每一行的数据 * column 表格每一列的数据 * rowIndex 表格的行索引,不包括表头,从0开始 * columnIndex 表格的列索引,从0开始 */ objectSpanMethod({ row, co...
element-ui 合并相邻的相同行 span-method
weixin_30660027的博客
08-21 402
element-ui 合并相邻的相同行 span-method vue <div id="app"> <template> <div> <el-table :data="tableData6" :...
el-table中的 span-method表格合并方法
04-19
很高兴回答您的问题。关于el-table表格的合并方法，您可以通过设置span-method属性来实现。span-method属性可以接受一个方法，该方法会返回一个包含rowspan和colspan两个属性的对象，来指定当前单元格的合并方式。具体实现方式请参考element-ui的官方文档。感谢您的提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值