Bootstrap

el-table指定列合并

最近有需求关于实现表格指定列相同数据合并,实现效果如下:
在这里插入图片描述
非原创,实验出两种方法,总结记录如下:

table标签使用 :span-method="objectSpanMethod"
方法一
return {
   tableColumnList:  [
	{
        "field": "businessDeptName",
        "fieldName": "业务部门",
    },
    {
        "field": "type",
        "fieldName": "资源类型code",
    }], // 表格字段配置
   tableData: [],// 表格数据
   colFields: ["businessDeptName","type"], // 存放所有的表头 一定要与tableData的一致
   spanArr: [], // 存储合并单元格的开始位置
   }
methods: {
// 指定列动态相同数据合并处理   接口中拿到tableData数据后执行getSpanArr()方法
    getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        const row = i
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j =

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;