Element UI table宽度自适应

<el-table-column prop="chineseName" header-align="center" align="center" label="单位名称"
        :width="flexColumnWidth('chineseName',this.dataList)">
</el-table-column>

在methods{ }里声明函数:

 // 自适应表格列宽
      flexColumnWidth(str, tableData, flag = 'max') {
        // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
        // flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'
        // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
        let columnContent = ''
        if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
          return
        }
        if (!str || !str.length || str.length === 0 || str === undefined) {
          return
        }
        if (flag === 'equal') {
          // 获取该列中第一个不为空的数据(内容)
          for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][str].length > 0) {
              columnContent = tableData[i][str]
              break
            }
          }
        } else {
          // 获取该列中最长的数据(内容)
          let index = 0
          for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][str] === null) {
              return
            }
            const now_temp = tableData[i][str]
            const max_temp = tableData[index][str]
            if (now_temp.length >= max_temp.length) {
              index = i
            }
          }
          columnContent = tableData[index][str].toString()
        }
        // 以下分配的单位长度可根据实际需求进行调整
        let flexWidth = 0
        for (const char of columnContent) {
          if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
            // 如果是英文字符,为字符分配8个单位宽度
            flexWidth += 8
          } else if (char >= '\u4e00' && char <= '\u9fa5') {
            // 如果是中文字符,为字符分配18个单位宽度
            flexWidth += 18
          } else {
            // 其他种类字符,为字符分配15个单位宽度
            flexWidth += 15
          }
        }
        if (flexWidth < 120) {
          // 设置最小宽度
          flexWidth = 120
        }
        return flexWidth
      },

转自:elementui的el-table根据列内容长度自适应调整列宽

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值