elementUI表格树动态合并列问题处理(最终版,---新需求)

在之前的一篇博客中针对这个问题,写了解决方法。现在是加了新需求,发现之前的算法有一些不足之处,现在进行纠正。

目前表格的需求是:

       评估人/评估分数/加减分说明,这个组合,根据评估人相同,就列合并;指标项目,评估人是为空的,这个组合都不合并;

      处理人/处理分数/加减分说明,这个组合,是动态表头,有可能只有一个组合,也有可能有2个组合,也有可能是3个组合;处理人是全合并,处理分数/加减分说明是指标项目,不合并,非指标项目全合并。

实现的效果图如下:

具体实现代码如下:(这里是以弹窗为例的。也可以不写在弹窗中。)





代码到此就完成了。

其中需要注意的就是row与col的合并,上面代码中,例入spanArr=[1,99,99,3,0,0]     99就代表row为0,col也为0,是被收起来的树节点的子节点,需要被隐藏掉;这种场景代表项目1为关闭,隐藏项目1下的子节点,项目2为打开,col需要合并为3,0,0,row都为1,0代表的是col此时不合并。

需要注意的第二点就是:当得到的人名组合为kpiObjArr=[a,22,22,b,b,b],如何将这个数组变为[1,99,99,3,0,0]这样的格式,22上述代码中已写过备注,代表被收起来的子节点,需要被隐藏。【kpiObjArr的场景非常多,这里再说几个例子 :

kpiObjArr=[a,22,22,a,a,a,b,b,b]          --------------------------------------------------spanArr=[4,0,0,0,99,99,3,0,0]

kpiObjArr=[a,22,22,a,22,22,b,22,22]------------------------------------------------------spanArr=[2,0,99,99,99,99,1,99,99]

需要找到规律,来将这个数组进行转化成功,最后再表格自带的合并方法中进行渲染,

elementUI表格树动态合并列问题处理(最终版,---新需求)_第1张图片

下面补充一下,后台返回的tableData的数据格式(数据多,所以没有写在上面进行定义)

// 后台返回的表格数据
tableData: [
  {
    id: '1191670059258875904',
    isFixed: false,
    approverName1: '张三',
    approverName2: '王五',
    approverName3: '李四',
    approverDiffScoreDescribe1: '',
    approverDiffScoreDescribe2: '',
    approverDiffScoreDescribe3: '',
    score1: 100,
    score2: 100,
    score3: 100,
    kpiScore: 99,
    name: "王五",
    num: 2,
    objectName: "项目1",
    remarks: null,
    selfRating: null,
    timelong: null,
    weight: null,
    workProgress: null,
    workStatus: null,
    assesseDiffScoreDescribe: 'null',
    children:[
      {
        id: "11916698122256666",
        name: "王五",
        objectName: "工作项1",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '',
        approverName2: '',
        approverName3: '',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: null,
        score2: null,
        score3: null,
      },
      {
        id: "2222222333322999999",
        name: "王五",
        objectName: "工作项2",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 100,
        score2: 100,
        score3: 100,
      }
    ]
  },
  {
    id: '11916700592588759042',
    isFixed: false,
    approverName1: '张三',
    approverName2: '王五',
    approverName3: '李四',
    approverDiffScoreDescribe1: '',
    approverDiffScoreDescribe2: '',
    approverDiffScoreDescribe3: '',
    score1: 100,
    score2: 100,
    score3: 100,
    kpiScore: 88,
    name: "王五",
    num: 2,
    objectName: "项目2",
    remarks: null,
    selfRating: null,
    timelong: null,
    weight: null,
    workProgress: null,
    workStatus: null,
    assesseDiffScoreDescribe: 'null333',
    children:[
      {
        id: "119166981222566662",
        name: "王五",
        objectName: "工作项1",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '',
        approverName2: '',
        approverName3: '',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: null,
        score2: null,
        score3: null,
      },
      {
        id: "22222223333229999992",
        name: "王五",
        objectName: "工作项2",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 100,
        score2: 100,
        score3: 100,
      },
      {
        id: "00000000002",
        name: "王五",
        objectName: "工作项3",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 100,
        score2: 100,
        score3: 100,
      }
    ]
  },
  {
    id: '11916700592588759042a',
    isFixed: false,
    approverName1: '张三',
    approverName2: '王五',
    approverName3: '李四',
    approverDiffScoreDescribe1: '',
    approverDiffScoreDescribe2: '',
    approverDiffScoreDescribe3: '',
    score1: 100,
    score2: 100,
    score3: 100,
    kpiScore: 100,
    name: "aaa兰",
    num: 2,
    objectName: "项目3",
    remarks: null,
    selfRating: null,
    timelong: null,
    weight: null,
    workProgress: null,
    workStatus: null,
    assesseDiffScoreDescribe: null,
    children:[
      {
        id: "119166981222566662a",
        name: "aaa兰",
        objectName: "工作项1",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '',
        approverName2: '',
        approverName3: '',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: null,
        score2: null,
        score3: null,
      },

      {
        id: "00000000002a",
        name: "aaa兰",
        objectName: "工作项2",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 100,
        score2: 100,
        score3: 100,
      }
    ]
  },
  {
    id: '9',
    isFixed: true,
    approverName1: '',
    approverName2: '',
    approverName3: '',
    approverDiffScoreDescribe1: '',
    approverDiffScoreDescribe2: '',
    approverDiffScoreDescribe3: '',
    score1: null,
    score2: null,
    score3: null,
    kpiScore: '',
    name: "",
    num: 2,
    objectName: "指标项目1",
    remarks: null,
    selfRating: null,
    timelong: null,
    weight: null,
    workProgress: null,
    workStatus: null,
    assesseDiffScoreDescribe: null,
    children:[
      {
        id: "99",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 50,
        score2: 40,
        score3: 60,
        name: "",
        objectName: "指标1",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        kpiScore: '',
      },
      {
        id: "999",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 101,
        score2: 102,
        score3: 103,
        name: "",
        objectName: "指标2",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        kpiScore: '',
      }
    ]
  },
  {
    id: '91',
    isFixed: true,
    approverName1: '',
    approverName2: '',
    approverName3: '',
    approverDiffScoreDescribe1: '',
    approverDiffScoreDescribe2: '',
    approverDiffScoreDescribe3: '',
    score1: null,
    score2: null,
    score3: null,
    kpiScore: '',
    name: "",
    num: 2,
    objectName: "指标项目2",
    remarks: null,
    selfRating: null,
    timelong: null,
    weight: null,
    workProgress: null,
    workStatus: null,
    assesseDiffScoreDescribe: null,
    children:[
      {
        id: "991",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 50,
        score2: 40,
        score3: 60,
        name: "",
        objectName: "指标项1",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        kpiScore: '',
      },
      {
        id: "9991",
        approverName1: '张三',
        approverName2: '王五',
        approverName3: '李四',
        approverDiffScoreDescribe1: '',
        approverDiffScoreDescribe2: '',
        approverDiffScoreDescribe3: '',
        score1: 101,
        score2: 102,
        score3: 103,
        name: "",
        objectName: "指标项2",
        remarks: "垃圾数据22019-11-05周报:已完成",
        selfDiffScoreDescribe: null,
        selfRating: 100,
        timelong: 8,
        weight: 100,
        workProgress: 100,
        workStatus: "4",
        kpiScore: '',
      }
    ]
  },
],

 

你可能感兴趣的:(vue+element项目)