el-table列宽自适应；el-table表格的列根据内容自动撑满；el-table内容换行问题；

最新推荐文章于 2024-04-26 17:54:13 发布
最新推荐文章于 2024-04-26 17:54:13 发布
阅读量1.9w 收藏 26
点赞数 9
分类专栏： element-ui 文章标签： vue.js element表格 el-table宽度自适应 el-table宽度撑满 el-table宽度按内容展开
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_a_div/article/details/121952724
版权

原文链接

重点就一个方法 :width="flexColumnWidth(‘date’,tableData)"
第一个参数是这个列的字段
第二个参数是这个表格的数据
只需要给对应的列 el-table-column 标签加上此方法 即可做到此列自适应
其他的列想要自适应宽度 同样使用 :width 方法即可
在这里插入图片描述

此段代码可直接复制使用：

这是情景一：

  • 需要自适应宽度的数据string，直接是在数组每一项下
<template>
  <div style="width:1400px;">
    <el-table border :data="tableData" fit style="width: 100%">
      <el-table-column label="日期" :width="flexColumnWidth('string',tableData)">
        <template slot-scope="scope">
          <span>{{ scope.row.string }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="a" label="a">
      </el-table-column>
      <el-table-column prop="b" label="b">
      </el-table-column>
      <el-table-column prop="c" label="c">
      </el-table-column>
      <el-table-column prop="d" label="d">
      </el-table-column>
      <el-table-column prop="e" label="e">
      </el-table-column>
      <el-table-column prop="f" label="f">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [
        {
          string: '条件他又长又短的', name: '王小虎', a: '12', b: '211', c: '11111111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          string: '一二三四五六七八九十', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          string: '条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦', name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          string: '条件他又长又看到配佛分富婆看哦考配哦', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'
        }
      ]
    }
  },
  methods: {
    // 自适应表格列宽
    flexColumnWidth (str, arr1, flag = 'max') {
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            return
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      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') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 15
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 8
        }
      }
      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 80
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }
      return flexWidth + 'px'
    }
  }
}
</script>

这是情景二：

  • 我们要自适应的这个列的数据字段 嵌套了一层 是在tableData每一个对象下的obj1对象里
  • 此时就需要将 flexColumnWidth 方法的 取值方式修改下，直接修改成 arr1[i]['obj1']['string']和arr1[index]['obj1']['string']，既去取每一项对象下obj1下的string。
    在这里插入图片描述
    在这里插入图片描述

代码可以直接复制使用：

<template>
  <div style="width:1300px;">
    <el-table border :data="tableData" fit style="width: 100%">
      <el-table-column label="文字" :width="flexColumnWidth('string',tableData)">
        <template slot-scope="scope">
          <el-input v-model="scope.row.obj1.string"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="a" label="a">
      </el-table-column>
      <el-table-column prop="b" label="b">
      </el-table-column>
      <el-table-column prop="c" label="c">
      </el-table-column>
      <el-table-column prop="d" label="d">
      </el-table-column>
      <el-table-column prop="e" label="e">
      </el-table-column>
      <el-table-column prop="f" label="f">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [
        {
          obj1: { string: '条件他又长又短的' }, name: '王小虎', a: '12', b: '211', c: '11111111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          obj1: { string: '一二三四五六七八九十' }, name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          obj1: { string: '条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦' }, name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          obj1: { string: '条件他又长又看到配佛分富婆看哦考配哦' }, name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'
        }
      ]
    }
  },
  methods: {
    // 自适应表格列宽
    flexColumnWidth (str, arr1, flag = 'max') {
      console.log(str)
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return '80px' // 给个默认的
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return '80px' // 给个默认的
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i]['obj1']['string'].length > 0) {
            // console.log('该列数据[0]:', arr1[0]['obj1']['string'])
            columnContent = arr1[i]['obj1']['string']
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i]['obj1']['string'] === null) {
            return
          }
          const now_temp = arr1[i]['obj1']['string'] + ''
          const max_temp = arr1[index]['obj1']['string'] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index]['obj1']['string']
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      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') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 15
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 8
        }
      }
      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 80
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }

      // 可以再多留部分的padding
      flexWidth += 30
      return flexWidth + 'px'
    }
  }
}
</script>

情景三：在表格的总宽度不够时候，会出现滚动条 是正常的。此时剩余的每列会自动平均分配获得相等宽度
在这里插入图片描述

情景四：也可以手动给剩余的分配列宽比例

注意是两种数据结构 两种方法的细节不一样！

i_am_a_div_日积月累_
关注
  • 9
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
改变el-table宽度
12-12
vue+element 设置页面表格，el-table拉动每列的宽度，并保存到localStorage里
简单实现 element-ui table列宽自调整
weixin_47906106的博客
07-20 2023
记录一下表格列宽的自动调整 第一步先安装 npm install af-table-column 第二步在项目的main.js中引入 import Vue from 'vue' import ElementUI from 'element-ui' import AFTableColumn from 'af-table-column' Vue.use(AFTableColumn) //要先引用vue再引入elementui 第三步在表格中使用 <el-table stripe :dat
elementui的el-table根据列内容长度自适应调整列宽
树上骑个猴的博客
08-06 1万+
应用： <el-table-column prop="paperNumber" :width="flexColumnWidth('paperNumber',viceTableData)" label="单号" align="center" /> 在methods{ }里写声明函数: flexColumnWidth(str,tableData,flag='max') { // str为该列的字段名(传字符串);tableData为该表格的数据
element table自适应列宽
weixin_52326756的博客
03-14 575
el-table通过内容宽度，自动撑开表格宽宽度
el-table 宽度100%无限延伸问题解决方法
CodingmanNAN的博客
04-19 3227
使用 elementUI Table 组件，实现宽度自适应方案之一
vue2 - 详细实现elementUI el-table 将表格布局自适应撑满页面高度（布局优化）
前端充电宝
03-01 1539
vue2详细实现elementUI el-table 将表格布局自适应撑满页面高度
实现el-table-column列宽根据内容自适应且无数据时自动撑开表头
megamind0430的博客
04-23 5120
使用element-ui在移动端进行数据展示时，表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多，不希望每个表格的高度不一致，所以有了希望根据表格数据最长的长度来设置表头宽度的需求。 这里是利用了一个插件ExTableColumn，具体操作方法： 通过继承实现el-table-column列宽根据内容自适应 大神写的插件，用npm下载到项目中，根据里边的步骤配置，是可用的。 但使用的时候遇到了一些问题，记录一下。 1.表格没有任何变化，但是表格里面的数据内容超出了边.
el-table中表格宽度设置
wjs_007的博客
08-01 1万+
大家好，我是小白学编程。最近在工作中遇到一个功能，页面上有表格展示，其实是一个再很简单不过的功能实现了，但是，有时候会遇到尴尬的情况，就是列数量比较尴尬，差不多可以拉伸整屏；差不多会在右侧流出点空白；差不多刚好多出一块，要么出现横向滚动条，要么某一列比较挤。像这种问题，也是很常见的，而且，在不同分辨率或不同放大倍数的电脑上展示时会出现不同的结果。根据自己遇到的情况和处理的方式，总结了一下几种处理方式。
el-table-column 表格列宽度根据内容自适应
热门推荐
xiaoyuer_2020的博客
08-23 2万+
问题 el-table 对于动态获取数据的表格，希望单元格内容不换行，就要设定足够的宽度，el-table-column 是支持设置固定宽度的，但是，由于数据不确定，所以无法预设宽度，怎么解决呢？ 解决方案 可以根据实际渲染后的 DOM 元素宽度动态计算内容宽度就能设置列的宽度。 具体做法 通过查看渲染后的 DOM 元素发现，el-table 的表头和内容分别用了一个原生table，通过colgroup设置每列的宽度。就从这里入手，col的name属性值和对应的 td 的class值是一致的，这样就可以遍历
【el-table的表格宽度自适应】
s_1024的博客
02-02 5317
el-tale组件在表头中只提供了一个width属性来控制表格的宽度，如果将其写死，则会针对过长的内容可能会有溢出换行、针对过短的内容可能会出现占位过多，所以就写了一个js文件来根据字符的长短来返回相应的宽度。
动态设置el-table操作列的宽度自适应
宁静致远
11-05 1万+
el-table动态操作列宽度自适应设置
【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx
12-28
el-table表头根据内容自适应完美解决表头错位和固定列错位 　　将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式 <el-table v-tableFit></el-table>） 　　通过计算文字的宽度进行表头设置，其他内容无法计算。 　　5000个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。 　　尽量使用v-if，不然有些情况下会计算错误。 　　Vue.directive("tableFit", {　　 //指令所在组件的 VNode 及其子 VNode 全部更新后调用。　　 componentUpdated(el, binding, vn
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 280
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 298
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 363
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 521
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
el-table-column列宽自适应
10-12
可以使用 `width="auto"` 来让 el-table-column 列宽自适应内容。 例如： ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="auto"></el-table-column> <el-table-column prop="age" label="年龄" width="auto"></el-table-column> <el-table-column prop="address" label="地址" width="auto"></el-table-column> </el-table> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值