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

最新推荐文章于 2024-03-29 02:37:58 发布

被闲置的鱼

最新推荐文章于 2024-03-29 02:37:58 发布

阅读量622

点赞数

分类专栏：前端VUE 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_14902731/article/details/125525482

版权

前端VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

/**
 * 合并计算方法
 * @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
}