合并table指定列的相同的数据

// 合并多行为一行
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
    return this.each(function(){
       var that;
       $('tr', this).each(function(row) {
          $('td:eq('+colIdx+')', this).each(function(col) {
             if (that!=null && $(this).html() == $(that).html()) {
                rowspan = $(that).attr("rowSpan");
                if (rowspan == undefined) {
	                   $(that).attr("rowSpan",1);
	                   rowspan = $(that).attr("rowSpan"); 
                   }
                rowspan = Number(rowspan)+1;
                $(that).attr("rowSpan",rowspan);
                $(this).remove();
             } else {
                that = this;
             }
          });
       });
    });
 }

// 合并table的相同数据,参数是某一列
$("#tableExcel").rowspan(1);

 

为了在el-table合并指定内容相同的行,可以使用el-table的span-method属性。该属性允许我们自定义单元格的合并方式。下面是一个例子,假设我们要合并第一内容相同的行: ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市海淀区' }, { name: '李四', age: 20, address: '北京市海淀区' }, { name: '王五', age: 22, address: '北京市朝阳区' }, { name: '赵六', age: 24, address: '北京市朝阳区' } ] }; }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 如果是第一 if (rowIndex === 0) { // 如果是第一行 return { rowspan: this.getRowspan(row.name, columnIndex), colspan: 1 }; } else { // 如果不是第一行 if (row.name === this.tableData[rowIndex - 1].name) { // 如果和上一行的name相同 return { rowspan: 0, colspan: 0 }; } else { // 如果和上一行的name不同 return { rowspan: this.getRowspan(row.name, columnIndex), colspan: 1 }; } } } else { // 如果不是第一 return { rowspan: 1, colspan: 1 }; } }, getRowspan(name, columnIndex) { // 获取需要合并的行数 let rowspan = 1; for (let i = 0; i < this.tableData.length; i++) { if (i !== 0 && this.tableData[i].name !== this.tableData[i - 1].name) { rowspan = 1; } if (this.tableData[i].name === name && i !== columnIndex) { rowspan++; } } return rowspan; } } }; </script> ``` 在上面的例子中,我们使用了handleSpanMethod方法来自定义单元格的合并方式。如果是第一,我们需要判断当前行和上一行的name是否相同,如果相同则返回{ rowspan: 0, colspan: 0 },表示当前单元格不需要渲染。如果不相同,则需要调用getRowspan方法获取需要合并的行数,并返回{ rowspan: rowspan, colspan: 1 }。如果不是第一,则直接返回{ rowspan: 1, colspan: 1 }。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值