element-ui 格式化树形数组在table组件中展示（单元格合并）

最近做的项目涉及到很多单元格合并问题，element-ui组件对于单元格合并的处理虽然很灵活，但是需要事先计算好每个单元格合并的rowspan和colspan，直接在span-method属性中计算实现起来有点困难，所以我拿到列表后先把每条数据的需要合并的rowspan计算出来然后直接在span-method属性中返回即可。上代码：

export const merge = function(

  colArr,

  list

) {

  var allProps = [];

  colArr.forEach((props, index) => {

    allProps.push(...props);

    list = getLevel(props, allProps, list);

  });

  return list;

};

//组装层

function getLevel(props, allProps, list) {

  var rowKey = {};

  for (var item of list) {

    let propInfo = getPropStr(allProps, item);

    if (rowKey[propInfo.key]) {

      rowKey[propInfo.key].children.push(item);

    } else {

      let obj = propInfo;

      obj.children = [item];

      rowKey[propInfo.key] = obj;

    }

  }

  let info = [];

  for (var key in rowKey) {

    rowKey[key].children.forEach((item, index) => {

      if (index == 0) {

        item = Object.assign(

          item,

          getMergeInfo(props, rowKey[key].children.length)

        );

      } else {

        item = Object.assign(item, getMergeInfo(props, 0));

      }

      info.push(item);

    });

  }

  return info;

}

//获取合并信息

function getMergeInfo(props, num) {

  let obj = {};

  props.forEach(item => {

    obj[item + "_merge"] = {

      rowspan: num,

      colspan: 1

    };

  });

  return obj;

}

// 把属性的值拼接在一起,并和属性的值一起返回。

function getPropStr(props, info) {

  let obj = {};

  let propStr = props.map(item => {

    obj[item] = info[item];

    return info[item];

  });

  obj.key = propStr.toString();

  return obj;

}

　导进去直接调用：

var colArr = [["id", "grade"], ["class"]];

    var list = [

      { id: 1, grade: 1, class: 1, name: "张三" },

      { id: 1, grade: 1, class: 1, name: "李四" },

      { id: 1, grade: 1, class: 2, name: "王五" },

      { id: 1, grade: 1, class: 2, name: "找六" },

      { id: 2, grade: 2, class: 7, name: "张三_1" },

      { id: 2, grade: 2, class: 7, name: "李四_1" },

      { id: 2, grade: 2, class: 3, name: "王五_1" },

      { id: 2, grade: 2, class: 3, name: "找六_1" }

    ];

merge(colArr, list)

巴特西

element-ui 格式化树形数组在table组件中展示（单元格合并）

最新文章

热门文章