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: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207041"levelName1: "组织党员干部自学"levelName2: "参加学习党员人数"levelName3: ""levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207042"levelName1: "组织党员干部自学"levelName2: "参加学习县处级以上党员干部人数"levelName3: ""levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207043"levelName1: "组织党员干部自学"levelName2: "所属基层党组织数量"levelName3: ""levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa79040hjk7207123"levelName1: "组织党员干部自学"levelName2: "发放教材、笔记本等资料数量"levelName3: ""levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207044"levelName1: "开展专题学习"levelName2: "党委(党组)理论学习中心组学习情况"levelName3: "本级专题学习次数"levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207045"levelName1: "开展专题学习"levelName2: "党委(党组)理论学习中心组学习情况"levelName3: "下属各级专题学习次数"levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207046"levelName1: "开展专题学习"levelName2: "基层党组织开展学习党史主题党日活动情况"levelName3: "开展主题党日活动的基层党组织数量"levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207047"levelName1: "开展专题学习"levelName2: "基层党组织开展学习党史主题党日活动情况"levelName3: "开展主题党日活动的数量"levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207048"levelName1: "开展专题学习"levelName2: "领导干部讲专题党课数量"levelName3: "市厅级领导干部讲专题党课数量"levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207049"levelName1: "开展专题学习"levelName2: "领导干部讲专题党课数量"levelName3: "县处级领导干部讲专题党课数量"levelName4: ""targetTotal: nullunitVal: "人"weight: 40},{baseTotal: nullbigDataTotal: nullbigTargetTotal: nulldataTotal: nullid: "aa790401jk7207050"levelName1: "开展专题学习"levelName2: "领导干部讲专题党课数量"levelName3: "基层党组织书记讲专题党课数量"levelName4: ""targetTotal: nullunitVal: "人"weight: 40}],typeNameArr: [],typeNamePos: 0,storeArr: [],storePos: 0,feeArr: [],feePos: 0,weightArr: [],weightPos: 0}},mounted() {this.merage()},methods: {merageInit() {this.typeNameArr = []this.typeNamePos = 0this.storeArr = []this.storePos = 0this.feeArr = []this.feePos = 0this.weightArr = []this.weightPos = 0},merage() {this.merageInit()this.tableSort = 1for (let i = 0; i < this.skuListInfo.length; i += 1) {if (i === 0) {// 第一行必须存在this.typeNameArr.push(1)this.typeNamePos = 0this.storeArr.push(1)this.storePos = 0this.feeArr.push(1)this.feePos = 0this.weightArr.push(1)this.weightPos = 0this.skuListInfo[i].tableSort = this.tableSort} else {// 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号// 第一二列// eslint-disable-next-line no-lonely-ifif (this.skuListInfo[i].levelName1 === this.skuListInfo[i - 1].levelName1) {this.typeNameArr[this.typeNamePos] += 1this.skuListInfo[i].tableSort = this.tableSortthis.typeNameArr.push(0)} else {this.tableSort += 1this.skuListInfo[i].tableSort = this.tableSortthis.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] += 1this.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] += 1this.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] += 1this.weightArr.push(0)} else if (this.skuListInfo[i].levelName3) {if (this.skuListInfo[i].levelName2 === this.skuListInfo[i - 1].levelName2) {this.weightArr[this.weightPos] += 1this.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 : 6if (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 : 0return {rowspan: row4,colspan: col4}}},
}
}
</script>

3、效果图

el-table使用span-method合并行相关推荐

antd Table合并行 rowSpan
实现这种效果,同一种知识点类型合并行. <Tablecolumns={columns}// dataSource={dataSource}dataSource={createNewArr(dat ...
Ant Design之表格动态合并行
在web开发中,表格的行合并是一个很常见的需求.antd也提供了这种功能,但是文档中的示例代码却和我想象中的相差甚远,如下所示,它是通过一种很笨的办法实现的行合并.这样当表格的数据源是动态获取的,我们 ...
rowspan 动态变化_rowspan相同值合并怎么动态的rowspan合并行
php 怎么控制表格,相同数据合并显示一行 Html中colspan属性和rowspan属性合并后该单元格的一个是合并行.一个合并列 colspan=2就代表合并他和他同一列的后一个单元格 rowsp ...
sed行处理详解(交换行,合并行,删除行等)
1.合并行 zj@zj:~/Script/blog_script$ cat test1 1 2 3 4 合并上下两行 zj@zj:~/Script/blog_script$ sed '$!N;s/\n ...
java合并sheet行_java poi Excel循环合并行
//Java poi 实现循环合并行,还是第一次遇到这种问题 //在网上查了很多资料,都不是自己想要的 //以下为自己研究后,写的一点东西,给大家分享,希望对大家能有思路上的启发,也希望大家能提出宝贵 ...
解决办法在idea中搭建spark环境：Unable to fetch table student. Invalid method name: ‘get_table_req‘；
项目场景: idea中搭建spark环境报错:Unable to fetch table student. Invalid method name: 'get_table_req'; 问题描述 Una ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
Excel按某一列或多列合并行
如果以某一列或者几列为基准,只要这一列或多列的数据相同就合并这些行的数据,不管这些行的其他列的数据是否相同.例如下图: 比如按登录名和地区两列合并行.希望最终要得到的结果如下: (注,无需比对的其他列 ...
【editplus经常用的快捷键】Editplus 选中一行ctrl+r，Edit 合并行 Ctrl+Shift+J 合并选定行删除当前行
Editplus 选中一行: ctrl+r Editplus 复制一行: ctrl+r选择行,然后ctrl+c复制. 复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行 ...
java操作导出Excel（jxl导出WritableWorkbook）jxl合并单元格,单元格的设置，单元格居中、字体、大小、换行、合并行，列宽、自动换行撑起高度、指定特定字符串样式等
new WritableCellFormat().setWrap(true);//通过调整宽度和高度自动换行 1.1 需求描述 MS的电子表格(Excel)是Office的重要成员,是保存统计 ...

el-table使用span-method合并行

el-table使用span-method合并行

el-table使用span-method合并行相关推荐

最新文章

热门文章