el-table合并指定列

使用:span-method="merge"

方法具体执行如下:

     //合并列
      merge({row, column, rowIndex, columnIndex}){
         if(columnIndex==4){
          return{
            rowspan: 1,	//合并的行数,1就是不合并,还是1行
            colspan: 2	//合并的列数
          }
         }
         if(columnIndex==6){
          return{
            rowspan: 1,	//合并的行数,1就是不合并,还是1行
            colspan: 2	//合并的列数
          }
         }
         if(columnIndex==5){
          return{
            rowspan: 1,	//合并的行数,1就是不合并,还是1行
            colspan: 0	//合并的列数,设为0则直接不显示
          }
         }
         if(columnIndex==7){
          return{
            rowspan: 1,	//合并的行数,1就是不合并,还是1行
            colspan: 0	//合并的列数,设为0则直接不显示
          }
         }
      },

效果如下:

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了在el-table合并指定内容相同的行,可以使用el-tablespan-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、付费专栏及课程。

余额充值