vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element ui设置table自适应表格宽,不自动换行

element ui设置table自适应表格宽,不自动换行问题

作者:想吃手撕面包

这篇文章主要介绍了element ui设置table自适应表格宽,不自动换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element ui设置table自适应表格宽,不自动换行

在我们平常开发使用element ui中的table时,会出现数据过长自动换行的结果,

如果把宽给死的情况下也不太适合,接下来提供二种方式去动态计算每个盒子的宽度。

第一种方式

<el-table :data="tableData"  table-layout='auto' class="tableAuto">
     <el-table-column prop="name" label="名称" />
 </el-table>

// 设置超出不折行
<style>
.tableAuto.el-table .cell {
  white-space: nowrap;
}
</style>

但这种方式纯在二个问题

1.el-table-column左侧多个列加fixed属性,左右滑动,列宽得提前计算

2.el-table设置table-layout='auto’ 与 固定表头 的功能冲突,表头无法再固定

第二种方式 (推荐使用第二种方式)

第二种方式就是通过canvas动态计算el-table-column宽度,可以完美解决第一种方式的2中弊端。

<template>
  <el-table>
     <el-table-column :width="flexWidth(item.en, tableData, item.cn)"></el-table-column>
   </el-table>
</temolate>
<script>
/**
 * dynamicCalculationWidth
 * @param string | number prop 每列的prop 可传''
 * @param array tableData 表格数据
 * @param string | number title 标题长内容短的,传标题  可不传
 * @param number num 列中有标签等加的富余量
 * @returns 每列的宽度
 * 注:prop,title有一个必传
 */
 dynamicCalculationWidth(prop, tableData, title, num = 0) {
      if (tableData.length === 0) {
        // 表格没数据不做处理
        return
      }
      let flexWidth = 0 // 初始化表格列宽
      let columnContent = '' // 占位最宽的内容
      let canvas = document.createElement('canvas')
      let context = canvas.getContext('2d')
      context.font = '14px Microsoft YaHei'
      if (prop === '' && title) {
        // 标题长内容少的,取标题的值,
        columnContent = title
      } else {
        // 获取该列中占位最宽的内容
        let index = 0
        for (let i = 0; i < tableData.length; i++) {
          const now_temp = tableData[i][prop] + ''
          const max_temp = tableData[index][prop] + ''
          const now_temp_w = context.measureText(now_temp).width
          const max_temp_w = context.measureText(max_temp).width
          if (now_temp_w > max_temp_w) {
            index = i
          }
        }
        columnContent = tableData[index][prop]
        // 比较占位最宽的值跟标题、标题为空的留出四个位置
        const column_w = context.measureText(columnContent).width
        const title_w = context.measureText(title).width
        if (column_w < title_w) {
          columnContent = title || '占位符呀'
        }
      }
      // 计算最宽内容的列宽
      let width = context.measureText(columnContent)
      flexWidth = width.width + 40 + num
      return flexWidth + 'px'
    },
    </script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文