el-table-span-method.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /**
  2. * 合并相同数据,导出合并行所需的方法(只适合el-table)
  3. * @param {Array} dataArray el-table表数据源
  4. * @param {Array} mergeRowProp 合并行的列prop
  5. * @param {Array} sameRuleRowProp 相同合并规则行的列prop
  6. */
  7. export function getSpanMethod(dataArray, mergeRowProp, sameRuleRowProp) {
  8. /**
  9. * 要合并行的数据
  10. */
  11. const rowspanNumObject = {};
  12. //初始化 rowspanNumObject
  13. mergeRowProp.map(item => {
  14. rowspanNumObject[item] = new Array(dataArray.length).fill(1, 0, 1).fill(0, 1);
  15. rowspanNumObject[`${item}-index`] = 0;
  16. });
  17. //计算相关的合并信息
  18. for (let i = 1; i < dataArray.length; i++) {
  19. mergeRowProp.map(key => {
  20. const index = rowspanNumObject[`${key}-index`];
  21. if (dataArray[i][key] === dataArray[i - 1][key]) {
  22. rowspanNumObject[key][index]++;
  23. } else {
  24. rowspanNumObject[`${key}-index`] = i;
  25. rowspanNumObject[key][i] = 1;
  26. }
  27. });
  28. }
  29. /**
  30. * 添加同规则合并行的数据
  31. */
  32. if (sameRuleRowProp !== undefined) {
  33. let k = Object.keys(rowspanNumObject).filter(key => {
  34. if (!key.includes('index')) {
  35. return key
  36. }
  37. })[0]
  38. for (let prop of sameRuleRowProp) {
  39. rowspanNumObject[prop] = rowspanNumObject[k]
  40. rowspanNumObject[`${prop}-index`] = rowspanNumObject[`${k}-index`]
  41. mergeRowProp.push(prop)
  42. }
  43. }
  44. /**
  45. * 导出合并方法
  46. */
  47. const spanMethod = function ({row, column, rowIndex, columnIndex}) {
  48. if (mergeRowProp.includes(column['property'])) {
  49. const rowspan = rowspanNumObject[column['property']][rowIndex];
  50. if (rowspan > 0) {
  51. return {rowspan: rowspan, colspan: 1}
  52. }
  53. return {rowspan: 0, colspan: 0}
  54. }
  55. return {rowspan: 1, colspan: 1}
  56. };
  57. return spanMethod;
  58. }