elementUI-table 表格内容按照内容显示,且没有折行

 /**
     * 使用span标签包裹内容,然后计算span的宽度 width: px
     * @param valArr
     */
    getTextWidth(str) {
      let padding = 0;//单元格左右padding距离
      let width = 0;
      let span = document.createElement('span');
      span.innerText = str;
      span.className = 'getwidth';
      document.querySelector('body').appendChild(span);
      // 这里可以获取当前单元格的font-size 以及 内容的中英文、字母等  做更精确的计算
      width = document.querySelector('.getwidth').offsetWidth + padding + 15;
      document.querySelector('.getwidth').remove();
      return width;
    },

/**
     * 遍历列的所有内容,获取最宽一列的宽度
     * @param {Array} arr 需要计算的数据
     * @param {Number} minwidth 列最小宽度
     */
    getMaxLength(arr, minwidth = 60) {
      return arr.reduce((acc, item) => {
        if (item) {
          let calcLen = this.getTextWidth(item);
          if (acc < calcLen) {
            acc = calcLen;
          }
        }
        return acc < minwidth ? minwidth : acc;
      }, 0)
    },

  calcColumnsWidth(columns, tableArr) {
      columns.forEach((item) => {
        const arr = tableArr.map((x) => x[item.property]);
        console.log("000000000000");
        console.log(item.width);
        arr.push(item.label); // 把每列的表头也加进去算
        item.width = this.getMaxLength(arr);
        if(item.property == 'szName'){
          item.width += 10;
        }
        if(item.property == 'maxLoadRate'){
          item.width += 10;
        }
        console.log(item);
      });
  
   
      return columns;
    }

以上是让表格的列宽度

获取到表格数据

//获取到表格的columns,然后对每一列进行转换

//参数一 tableData1Tab为表格的ref,获取到表格中的所有columns

//参数二:为通过接口获取到的当前表格的数组

 const columns = this.calcColumnsWidth(this.$refs.tableData1Tab.columns, newData);
  this.$refs.tableData1Tab.columns = columns;

  

posted @ 2023-12-04 16:58  三寸日光  阅读(64)  评论(0编辑  收藏  举报