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;
}

 span-method合并函数:

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row[column.property + "_merge"]) {
        return row[column.property + "_merge"];
      } else {
        return { rowspan: 1, colspan: 1 };
      }
    },

  

导进去直接调用:

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" }
    ];
this.tableDate = merge(colArr, list);

 element-ui 格式化树形数组在table组件中展示(单元格合并)插图

 

备注:colArr是要合并的层级。示例中id和grade是第一次,class是第二层。
    list是数据列表。

  

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

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

发表评论

免登录下载网,提供全网最优质的资源集合!