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

发布时间 2023-12-04 17:04:16作者: 三寸日光
 /**
     * 使用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宽度都会根据当前列的内容进行重写
/*
//获取到表格的columns,然后对每一列进行转换
//参数一 tableData1Tab为表格的ref,获取到表格中的所有columns
//参数二:为通过接口获取到的当前表格的数组
*/
 const columns = this.calcColumnsWidth(this.$refs.tableData1Tab.columns, newData);
  this.$refs.tableData1Tab.columns = columns;