element el

2024-07-06 17:55| 来源: 网络整理| 查看: 265

2024.2.27今天我学习了如何用el-table实现表格宽度的自适应，当我们动态渲染表格数据的时候，有时候因为内容太多会出现挤压换行的效果：

思路来自：

ElementUI中el-table表格列宽自适应以及封装_el-table表格太大-CSDN博客

根据这个博主的写法做了一些改进，增加了表格表头和内容拼接获取最大长度。

我们需要根据内容的最大长度设置动态的宽度，这边我在utils里面封装了一个js：

/** * el-table扩展工具 -- 列宽度自适应 * @param {*} prop 字段名称(string) * @param {*} tableData table数据列表集(array) * @returns 列宽(int) */ export function getColumnWidth(label, prop, tableData) { //label表头名称 //prop对应的内容 //tableData表格数据 const minWidth = 80 // 最小宽度 const padding = 10 // 列内边距 let arr = tableData.map(item => item[prop]) arr.push(label)//拼接内容和表头数据 const contentWidths = arr.map(item => { const value = item ? String(item) : '' const textWidth = getTextWidth(value) return textWidth + padding }) const maxWidth = Math.max(...contentWidths) return Math.max(minWidth, maxWidth) } /** * el-table扩展工具 -- 列宽度自适应 - 获取列宽内文本宽度 * @param {*} text 文本内容 * @returns 文本宽度(int) */ function getTextWidth(text) { const span = document.createElement('span') span.style.visibility = 'hidden' span.style.position = 'absolute' span.style.top = '-9999px' span.style.whiteSpace = 'nowrap' span.innerText = text document.body.appendChild(span) const width = span.offsetWidth + 40 document.body.removeChild(span) return width }

然后在main.js中引入：

import {getColumnWidth} from '@/utils/el_table_content_width_adaptation' //el-table表格内容宽度自适应 Vue.prototype.elTableAdaptationWidth = getColumnWidth

然后在页面中直接调用就可以了：

效果如下：

【本文地址】

公司简介

联系我们