utils

109 阅读1分钟
  // 获取tree每一层级的id
  function filterTreeIds (data) {
      const selectIds = []
      const filterIds = function (data) {
        if (data.children && data.children.length) {
          selectIds.push(data.id)
          data.children.forEach(item => {
            if (item.children && item.children.length) {
              filterIds(item)
            } else {
              selectIds.push(item.id)
            }
          })
        }
      }
      filterIds(data)
      return selectIds
    }
    
    // 获取vue中table的动态高度
    /**
   * 解决页面缩放,表格响应式调整高度
   */
  function setTableHeight (_this) {
    _this.$nextTick(() => {
      if (_this.$refs.tableWrap) {
        _this.tableHeight = _this.$refs.tableWrap.offsetHeight
      }
    })
    window.onresize = () => {
      return (() => {
        if (_this.$refs.tableWrap) {
          const tableWrapHeight = _this.$refs.tableWrap.offsetHeight
          _this.tableHeight = tableWrapHeight
        }
      })()
    }
  }
  
  /**
     * calcWidth 计算表格标题列宽度
     * @param prop 每列的prop 可传''
     * @param tableData 表格数据
     * @param title 标题长内容短的,传标题  可不传
     * @param num 列中有标签等加的富余量
     * @returns 列的宽度
     * 注:prop,title有一个必传
     */
    function calcWidth (prop, tableData, title, num = 0) {
      let flexWidth = 0// 初始化表格列宽
      let columnContent = ''// 占位最宽的内容
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      context.font = '14px Microsoft YaHei'
      if (tableData.length === 0) { // 表格没数据不做处理
        const width = context.measureText(title)
        flexWidth = width.width + 50 + num
        return flexWidth + 'px'
      }
      if ((prop === '') && title) { // 标题长内容少的,取标题的值,
        columnContent = title
      } else { // 获取该列中占位最宽的内容
        let index = 0
        for (let i = 0; i < tableData.length; i++) {
          const nowTemp = tableData[i][prop] + ''
          const maxTemp = tableData[index][prop] + ''
          const nowTempW = context.measureText(nowTemp).width
          const maxTempW = context.measureText(maxTemp).width
          if (nowTempW > maxTempW) {
            index = i
          }
        }
        columnContent = tableData[index][prop]
        // 比较占位最宽的值跟标题、标题为空的留出四个位置
        const columnW = context.measureText(columnContent).width
        const titleW = context.measureText(title).width
        if (columnW < titleW) {
          columnContent = title || ''
        }
      }
      // 计算最宽内容的列宽
      const width = context.measureText(columnContent)
      flexWidth = width.width + 50 + num
      return flexWidth + 'px'
    }

/**
   * 超过一定长度,换行
   * text 字符串文本
   * maxNum 超过多少个字符换行
   */
  function textWrap (text, maxNum) {
    let str = ''
    const arr = text.split(' ')
    let tmp = ''
    arr.forEach((item) => {
      if (item.length >= maxNum) {
        str = str + item + '\n'
      } else {
        if (tmp.length + item.length < maxNum) {
          tmp = tmp + item + ' '
        } else {
          str = str + tmp + '\n'
          tmp = item + ' '
        }
      }
    })
    str = str + tmp
    return str
  }