elementUI表格----合并单元格

直接复制到文件中，看看就能明白怎么用

原文地址：

https://blog.csdn.net/qq_14993591/article/details/124048897

<template><el-table:data="tableData"border:span-method="objectSpanMethod"style="width: 100%;text-align:center;border:1px solid #d9d9d9":cell-style="{background:'#ffffff'}":header-cell-style="{background: '#ffffff',color: '#333',fontSize: '13px','text-align': 'center'}"><el-table-column label="序号" width="50"><template slot-scope="scope">{{scope.$index+(pageIndex - 1) * pageSize + 1}}</template></el-table-column><el-table-column prop="APTITUDEKINDNAME" label="资质类别" width="150"></el-table-column><el-table-column prop="CertID" label="资质证书编号" width="200"></el-table-column><el-table-column prop="Zzmark" label="资质名称" width="250"></el-table-column><el-table-column prop="OrganDate" label="发证日期" width="130"></el-table-column><el-table-column prop="EndDate" label="   发证有效期" width="130"></el-table-column><el-table-column prop="OrganName" label=" 发证机关" width="178"></el-table-column><el-table-column label="预览" prop="MOVE" width="110"><template slot-scope="scope"><span@click="certInfo(scope.row.CertID,_self.type)"style="color:#ff6600;cursor: pointer;">证书信息</span></template></el-table-column></el-table>
</template><script>
export default {name: 'demo',data () {return{tableData: [{"APTITUDEKINDNAME":"安全生产许可","CertID":"（浙）JZ安许证字[2014]021262","OrganName":"浙江省住房和城乡建设厅","UnitMan":"王浩明","OrganDate":"2014年10月13日","EndDate":"2023年09月23日","Zzmark":"","TechManDuty":"","TechMan":"王晓勤"},{"APTITUDEKINDNAME":"建筑业","CertID":"D233020828","OrganName":"浙江省建设厅","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"电子与智能化工程专业承包贰级","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑业","CertID":"D233020828","OrganName":"浙江省建设厅","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"建筑装修装饰工程专业承包贰级","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑机电安装工程专业承包叁级","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"市政公用工程施工总承包叁级","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑工程施工总承包叁级","TechManDuty":"","TechMan":null}], spanArr:[],contentSpanArr:[],contentSpanArr_3:[],contentSpanArr_4:[],contentSpanArr_5:[],contentSpanArr_6:[],contentSpanArr_7:[],}},mounted () {this.tableDatas();//目前数据默认是写死，所以直接执行该方法。项目中通过后台数据调用成功后，在表格渲染后执行该方法},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {console.log( row, column, rowIndex, columnIndex)console.log(this.spanArr)if (columnIndex === 1) {//合并资质类别const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if (columnIndex === 2) {//合并资质证书号const _row = this.contentSpanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}//   if (columnIndex === 3) {//     //合并资质名称//     const _row = this.contentSpanArr_3[rowIndex];//     const _col = _row > 0 ? 1 : 0;//     return {//       rowspan: _row,//       colspan: _col//     };//   }//   if (columnIndex === 4) {//     //发证日期//     const _row = this.contentSpanArr_4[rowIndex];//     const _col = _row > 0 ? 1 : 0;//     return {//       rowspan: _row,//       colspan: _col//     };//   }//   if (columnIndex === 5) {//     //发证有效期//     const _row = this.contentSpanArr_5[rowIndex];//     const _col = _row > 0 ? 1 : 0;//     return {//       rowspan: _row,//       colspan: _col//     };//   }//   if (columnIndex === 6) {//     //发证机关//     const _row = this.contentSpanArr_6[rowIndex];//     const _col = _row > 0 ? 1 : 0;//     return {//       rowspan: _row,//       colspan: _col//     };//   }//   if (columnIndex === 7) {//     //预览//     const _row = this.contentSpanArr_7[rowIndex];//     const _col = _row > 0 ? 1 : 0;//     return {//       rowspan: _row,//       colspan: _col//     };//   }},// 表格合并方法tableDatas() {let contactDot = 0;let contactDot_1 = 0;//   let contactDot_2 = 0;//   let contactDot_3 = 0;//   let contactDot_4 = 0;//   let contactDot_5 = 0;let contactDot_6 = 0;this.spanArr = [];this.contentSpanArr = [];//   this.contentSpanArr_3 = [];//   this.contentSpanArr_4 = [];//   this.contentSpanArr_5 = [];//   this.contentSpanArr_6 = [];this.contentSpanArr_7 = [];//   this.APTITUDENAME = [];this.tableData.forEach((item, index) => {console.log(item)item.index = index;if (index === 0) {this.spanArr.push(1);this.contentSpanArr.push(1);//   this.contentSpanArr_3.push(1);//   this.contentSpanArr_4.push(1);//   this.contentSpanArr_5.push(1);//   this.contentSpanArr_6.push(1);this.contentSpanArr_7.push(1);} else {// 判断第二列if (item.APTITUDEKINDNAME === this.tableData[index - 1].APTITUDEKINDNAME) {this.spanArr[contactDot] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);contactDot = index;}//判断第三列if (item.CertID === this.tableData[index - 1].CertID) {this.contentSpanArr[contactDot_1] += 1;this.contentSpanArr.push(0);this.contentSpanArr_7[contactDot_6] += 1;this.contentSpanArr_7.push(0);}else {this.contentSpanArr.push(1);contactDot_1 = index;this.contentSpanArr_7.push(1);contactDot_6 = index;}//   //资质证书编号//   if (item.Zzmark === this.tableData[index - 1].Zzmark) {//     this.contentSpanArr_3[contactDot_2] += 1;//     this.contentSpanArr_3.push(0);//   } else {//     this.contentSpanArr_3.push(1);//     contactDot_2 = index;//   }//   //发证日期//   if (item.OrganDate === this.tableData[index - 1].OrganDate) {//     this.contentSpanArr_4[contactDot_3] += 1;//     this.contentSpanArr_4.push(0);//   } else {//     this.contentSpanArr_4.push(1);//     contactDot_3 = index;//   }//   //发证有效期//   if (item.EndDate === this.tableData[index - 1].EndDate) {//     this.contentSpanArr_5[contactDot_4] += 1;//     this.contentSpanArr_5.push(0);//   } else {//     this.contentSpanArr_5.push(1);//     contactDot_4 = index;//   }//   //发证机关//   if (item.OrganName === this.tableData[index - 1].OrganName) {//     this.contentSpanArr_6[contactDot_5] += 1;//     this.contentSpanArr_6.push(0);//   } else {//     this.contentSpanArr_6.push(1);//     contactDot_5 = index;//   }}});},}
}
</script>
<style scoped></style>

elementUI表格----合并单元格相关推荐

elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
ElementUI el-table合并单元格
VUE项目中经常遇到table表格合并单元格的需求,el-table组件支持自定义单元格合并(:span-method="objectSpanMethod"),即将某一属性值相同的 ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
layui实现表格合并单元格，设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

elementUI表格----合并单元格

elementUI表格----合并单元格相关推荐

最新文章

热门文章