基于若依前后端分离的el-table设置

敲厉害的燕宝

已于 2024-07-01 18:38:08 修改

阅读量2.2k

点赞数 25

文章标签： vue.js javascript 前端

于 2024-01-23 09:32:17 首次发布

本文链接：https://blog.csdn.net/m0_63456808/article/details/135752425

版权

本文介绍了如何在Vue应用中使用ElementUI的el-table实现列宽自适应，包括使用`auto-resize`属性、`flexColumnWidth`函数以及列排序和固定功能的实现方法。作者分享了个人在调整列宽上的经验及解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列宽自适应：自适应最长的标题或内容

借鉴他人，亲测有效！

border 添加表格边框

resizable 属性设置为 true 列宽可调整；表格的每一列都可以通过拖动列头分隔条来调整宽度。

auto-resize="true"用于控制表格的列宽是否自动调整以适应内容。如果将 auto-resize 属性设置为 true，则表格的列宽将根据内容自动调整，以确保所有内容都能完全显示。但我自己使用不是很管用，不知道那里的问题。后来在el-table-column 中使用了:width="flexColumnWidth('标题名称','Name')"就很nice

<el-table v-loading="loading" 
:data="infoList" 
ref="tableRef" 
@selection-change="handleSelectionChange" 
border resizable  
auto-resize="true" 
 >
<el-table-column 
label="标题名称"
align="center" 
prop="Name"                
:width="flexColumnWidth('标题名称','Name')"/>
</el-table>

//遍历列的所有内容，获取最宽一列的宽度
getMaxLength (arr) {
  return arr.reduce((acc, item) => {
    if (item) {
      const calcLen = this.getTextWidth(item)
      if (acc < calcLen) {
        acc = calcLen
      }
    }
    return acc
  }, 0)
},

getTextWidth (str) {
  let width = 0
  const html = document.createElement('span')
  html.innerText = str
  html.className = 'getTextWidth'
  document.querySelector('body').appendChild(html)
  width = document.querySelector('.getTextWidth').offsetWidth
  document.querySelector('.getTextWidth').remove()
  return width
},
/**
 * el-table-column 自适应列宽
 * @param prop_label: 表名
 * @param table_data: 表格数据
 */
flexColumnWidth (label, prop) {
// 1.获取该列的所有数据
  const arr = this.infoList.map(x => x[prop])
// 把每列的表头也加进去算
  arr.push(label) 
// 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
  return (this.getMaxLength(arr) + 40) + 'px'
}

列排序：每列的标题右面可以逆序/顺序排序

在el-table-column标签中加入sortable即可

<el-table-column label="主键id" align="center" prop="articleId" 
fixed
sortable
:width="flexColumnWidth('主键id','articleId')"/>

列固定：左右滑动，列固定

在el-table-column标签中加入fixed即可

<el-table-column label="主键id" align="center" prop="articleId"  
fixed
:width="flexColumnWidth('主键id','articleId')"/>

参考：

【vue】ElementUI el-table自适应列宽实现_el-table 宽度自适应-CSDN博客