表格列宽自适应

// el-table 列数据
data(){
  return{
      tableColumn : [
        {
          label: "物料名称",
          prop: "materialName",
          width: 150
        },
        {
          label: "色名",
          prop: "colorName",
          width: 150
        },
      ]
  }
},

 // 获取列宽度 tableData: 接口返回表格数据,label: 表头名字,columnKey: 列表对应字段
      getColumnWidth(tableData,label,columnKey){
        const arr = tableData.map(x => x[columnKey])
        arr.push(label) // 把每列的表头也加进去算
        // 获取列中最长的字符长度
        let text =  this.findLongestElement(arr)
        const chineseLeg = this.countCharacters(text).chineseCount || 0
        const digitLeg = this.countCharacters(text).digitCount || 0
        const englishLeg = this.countCharacters(text).englishCount || 0
        // 根据字符长度设置列宽,可以根据具体需求进行调整
        const maxLength = (chineseLeg * 14) + (digitLeg * 9) + (englishLeg * 12) ; 
        const minWidth = 90; // 最小列宽
        const padding = 30; // 额外的内边距
        return `${Math.max(minWidth, maxLength + padding)}px`;
      },
      // 获取最长字符有多少汉字/数字/英文
      countCharacters(str) {
        const chinesePattern = /[\u4e00-\u9fa5]/g; // 匹配汉字的正则表达式
        const digitPattern = /\d/g; // 匹配数字的正则表达式
        const englishPattern = /[a-zA-Z]/g; // 匹配英文字符的正则表达式
      
        const chineseCount = (str.match(chinesePattern) || []).length;
        const digitCount = (str.match(digitPattern) || []).length;
        const englishCount = (str.match(englishPattern) || []).length;
      
        return { chineseCount, digitCount, englishCount };
      },
      // 获取最长的一个字符
      findLongestElement(arr) {
        if (arr.length === 0) {
          return null; // 如果数组为空,返回null或者其他适当的值
        }
        // 使用 reduce 方法找到最长的元素
        const longestElement = arr.reduce((longest, current) => {
          if (String(current).length == String(longest).length) { // 如果长度相等 选取汉字多的字符为标准
            const chineseLeg = this.countCharacters(String(current)).chineseCount || 0
            const chineseLeg2 = this.countCharacters(String(longest)).chineseCount || 0
            return chineseLeg2 < chineseLeg ? String(current) : String(longest);
          } else {
            return String(current).length > String(longest).length ? String(current) : String(longest);
          }
        }, arr[0]);
        return longestElement;
      }


// 使用
this.tableColumn.forEach(item => {
        item.width = this.getColumnWidth(res.data.records,item.label,item.prop)
 })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容