table相同的列合并

function mergeRows(tableId){
    var rows=$("#"+tableId).find("tbody:first").children();
    var row;
    var lastIndex;
    var lastOrderId;
    var temp,tempId;
    var count=1;
    var chds;
    for(var i=0;i<rows.length;i++){
       row = rows.eq(i);
       chds = row.children();
       temp = chds.eq(0);
       temp.attr("isfirst","1");
       chds.eq(chds.length-1).attr("isfirst","1");
       chds.eq(chds.length-2).attr("isfirst","1");
       tempId = temp.text();
       if(!lastOrderId){
          lastOrderId = tempId;
          lastIndex=0;
          continue;
       }
       if(tempId==lastOrderId){
          count++;
       }else{
          if(count>=1){
              chds = rows.eq(lastIndex).children();
              chds.eq(0).attr("rowspan",count).removeAttr("isfirst");
              chds.eq(chds.length-1).attr("rowspan",count).removeAttr("isfirst");
              chds.eq(chds.length-2).attr("rowspan",count).removeAttr("isfirst");
          }
          lastOrderId = tempId;
          lastIndex=i;
          count=1;
       }
       if((i==(rows.length-1))&&count>=1){
          chds = rows.eq(lastIndex).children();
          chds.eq(0).attr("rowspan",count).removeAttr("isfirst");
          chds.eq(chds.length-1).attr("rowspan",count).removeAttr("isfirst");
          chds.eq(chds.length-2).attr("rowspan",count).removeAttr("isfirst");
       }
    }
    
    if(rows.length>1){
    	$("td[isfirst=1]").remove();
    }
    
}


在 Element UI 中,`el-table` 组件可以通过指定的属性来实现合并的功能。具体来说,合并通常涉及以下两个属性: 1. `span-method`: 这是一个方法属性,用于指定一个函数,该函数会传入行的行号 `row`、号 `column`、当前单元格的值 `row`、当前行 `column` 和 `row` 所在的表格的 `table` 实例作为参数,返回一个包含两个属性的对象: - `colspan`: 合并的单元格数量 该函数返回的对象定义了当前单元格需要合并的行数和数。 2. `type`: 在定义中设置此属性,可以指定当前是横向合并(`type: 'merge'`)还是纵向合并(`type: 'index'`)。通常,`type: 'index'`用于纵向合并,表示索引,即会根据传入的`span-method`函数返回的`rowspan`值来决定合并多少行。 合并单元格的示例代码如下: ```html <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> <!-- 合并单元格的内容 --> {{ scope.row.name }} </template> </el-table-column> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <!-- 合并单元格的内容 --> {{ scope.row.date }} </template> </el-table-column> <el-table-column label="操作" type="expand"> <!-- 操作 --> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ name: '王小虎', date: '2016-05-02', }, { name: '王小虎', date: '2016-05-04', }, { name: '王小虎', date: '2016-05-01', address: '上海市普陀区金沙江路 1518 弄' }, { name: '王小虎', date: '2016-05-03', }] } }, methods: { getRowspan(row, column) { // 根据需要返回具体的rowspan值 }, getColspan(row, column) { // 根据需要返回具体的colspan值 } } } </script> ``` 请注意,实际的合并逻辑需要根据你的数据结构和显示需求编写相应的`getRowspan`和`getColspan`方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值