Ant-vue-tabel2.x表格合计通用方法

/**
 * 合并计算方法
 * @param refs this.$ref.table 表格的ref
 * @param columObj[rowName:"",trId:"",colSpan:0,callFun]  参数对象
 * @param columObj.trId tr 唯一id
 * @param columObj.colSpan 合并单元格数量
 * @param columObj.callFun 计算逻辑方法 是 [function]
 */
export function addTableColum(refs, columObj = [{rowName: "", trId: "", colSpan: 0, callFun: Object}]) {
  columObj.forEach(item => {
    createColum(refs, item.rowName, item.trId, item.colSpan, item.callFun)
    let table = refs.$el.querySelector('table')
    let input = table.querySelectorAll('input')
    input.forEach(inp => {
      if (!inp.disabled) {
        inp.onchange = function () {
          addTableColum(refs, columObj)
        }
      }
    })
  })``
}

function createColum(refs, rowName, trId, colSpan, calFunc) {
  // 获取所有行
  let columns = refs.columns
  // 回调计方法得到数据
  let valObj = calFunc()
  var tbody = refs.$el.querySelector('tbody')
  let trIds = tbody.querySelector("#" + trId)
  // 如果已经存在对应的node节点了则修改数据  否则去创建
  if (trIds != null) {
    columns.forEach(keys => {
      trIds.childNodes.forEach((tdNode, index) => {
        if (keys.key === tdNode.key) {
          tdNode.innerText = valObj[tdNode.key].toFixed(2)
        }
      })
    })
  } else {
    let tr = createTr(trId)
    let td = createTd(rowName)
    td.colSpan = colSpan
    tr.appendChild(td)
    columns.forEach(keys => {
      for (const valKey in valObj) {
        if (keys.key === valKey) {
          let nodeTd = createTd(valObj[valKey].toFixed(2))
          nodeTd.key = valKey
          tr.appendChild(nodeTd)
        }
      }
    })
    tbody.appendChild(tr)
  }
}

// 创建TR
function createTr(trId = "") {
  let tr = document.createElement("tr");
  tr.id = trId
  // 默认CSS
  const defClass = 'default-class'
  // 鼠标移入移出css
  const hoverClass = 'hover-class'
  tr.className =  defClass
  // tr事件
  tr.onmouseenter = function () {
    tr.className = hoverClass
  }
  tr.onmouseleave = function () {
    tr.className = defClass
  }
  return tr
}

// 创建td
function createTd(tdVal = "") {
  let td = document.createElement("td");
  td.className = 'poros-table-row-cell-break-word'
  td.style = 'text-align: center;'
  td.innerText = tdVal
  return td
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84