element ui 表格合并单元格

原创 2018年04月17日 14:35:58

先上效果图:


再上代码:

<template>
  <div>
    
    <el-table
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1(元)">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2(元)">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3(元)">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData6: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        },
        {
          id: '12987122',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        },
        {
          id: '12987122',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        },
        {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }
      ],
      column_row_offset: {
        id: [3, 1, 1],
        name: [2, 1, 1, 1],
        amount1: [1, 1, 1, 1, 1],
        amount2: [1, 1, 1, 1, 1],
        amount3: [1, 1, 1, 1, 1]
      },
      now_col_row_num: {},
      now_col_offset: {},
       
    };
  },
  methods: {
   
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.now_col_row_num[column.property]) {
        this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property]);
        let a = this.now_col_row_num[column.property].shift();
        this.now_col_offset[column.property] = a;
        return {
          rowspan: a,
          colspan: 1
        };
      } else if (rowIndex >= this.now_col_offset[column.property]) {
        let a = this.now_col_row_num[column.property].shift();
        this.now_col_offset[column.property] += a;
        return {
          rowspan: a,
          colspan: 1
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
 
    }
  }
};
</script>

最后说思路:

主要是根据data中的column_row_offset表示哪几行要合并。

EL表达式合并table列rowspan

如下图问题的描述:         如图所示需要将发货批次相同的列合并,对应的收货状态和查看备注合并。刚开始的思路只限于用js写,后来经过同事的指点发现永EL表达式就能很好的解决,看代码: ...
  • liu_yujie2011com
  • liu_yujie2011com
  • 2017-03-14 21:04:10
  • 1632

Vue2.0+ElementUI+PageHelper实现的表格分页

Vue2.0+ElementUI+PageHelper实现的表格分页
  • u012907049
  • u012907049
  • 2017-04-19 10:19:47
  • 24508

Table合并列

/**  * 合并列单元格:  * 参数: tabObj 表格对象,  * cellindex 合并第几列,  *   beginRow 从第几行开始(0是表头,一般从1开始)  */ ...
  • AndrewZhuo
  • AndrewZhuo
  • 2014-04-09 11:14:38
  • 381

使用elementui表格,项目感悟

一、使用表格第一步 import ElementUI from 'element-ui' Vue.use(ElementUI) 二、完成第一步,接下来直接引用组件标签了     ...
  • qq_24122593
  • qq_24122593
  • 2016-12-29 18:08:44
  • 28137

element UI table表格组件使用[超级完整功能]

实现的功能如下: 1.表格数据获取 2.表格数据的增、删、改,查 3.表格数据分页 4.数据导入 5.数据导出 6.表格数据排序 7.表格数据字段格式化 8.表格宽度自适应 9.表格...
  • museions
  • museions
  • 2017-09-03 19:01:01
  • 16094

表格合并

刚开始学习html的时候,我特别喜欢写表格,因为看着很舒服,而且简单。 后来因为页面当中的很多功能要取值的原因,表格暂时被我放下了。全部改成用div模拟了。 其实我个人觉得,如果只是单纯的展示界面,或...
  • Bright2017
  • Bright2017
  • 2017-04-19 15:47:39
  • 197

JS生成表格,合并单元格

在网上找了这么多都没有JS生成表格然后JS操作合并单元格的,或者是别人写的太负责了,又不想去理解,所以就自己动手写了个简单点的。 其实代码也不多,思路清晰就基本上可以了。一开始的时候是被colspa...
  • devenzeng
  • devenzeng
  • 2016-11-17 11:47:58
  • 1665

vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头

表头主要复杂在:1,有三层,一层是大类,第二层是具体项,第三层是标准值/对比值2,首列和末尾列是一层3,整个表格的维度是根据数据的输入自己生成,也就是动态的下面是在 vue + eleUI 中的解决方...
  • wanwan5856
  • wanwan5856
  • 2018-03-20 19:06:02
  • 72

表格中某一列相邻内容一样的合并行

原需求:生成的word版、PDF版合同中多行产品最后一列备注内容太多,不同产品有时备注又一样,这样每一列产品都有一个内容很长的备注,导致整个合同的排版不美观,占空间也比较大,如图1。因此用户提出:将不...
  • yiyelanxin
  • yiyelanxin
  • 2018-03-24 10:05:59
  • 34

table合并单元格(Jquery 插件

table合并单元格(Jquery 插件) table{ border-collapse:collapse;} table th{ background:#ddd; } table td,t...
  • z69183787
  • z69183787
  • 2013-12-04 10:58:01
  • 1705
收藏助手
不良信息举报
您举报文章:element ui 表格合并单元格
举报原因:
原因补充:

(最多只允许输入30个字)