element el-table（:render-header）实现动态表头的自适应

2023.2.10今天我学习了如何实现自定义表头的宽度自适应。

在使用el-table的时候我们使用动态的表头会发现出现宽度不够挤压的情况，如：

这会让整个页面的布局不美观，于是我找到了：render-header计算一个表头的字节长度，进行计算拿到自定义的宽度。

效果如：

我们可以进行在main.js中引入一个全局组件的封装。

新文件.js:

// 实现全局表头自适应的方法
// 在el-table-column中使用:render-header="tableHeaders.renderHeader"
//renderHeader自定义的变量名
const commonJS = {renderHeader(h, { column, $index }) {let width = 0// 新建一个 spanlet span = document.createElement('span');// 设置表头名称span.innerText = column.label;// 设置表头classspan.className = 'getTextWidth'// 临时插入 documentdocument.querySelector('body').appendChild(span)// 获取span标签的宽度width = document.querySelector('.getTextWidth').offsetWidth// 重点：获取span最小宽度,设置当前列,注意这里加了20,字段较多时还是有挤压,且渲染后的div内左右padding都是10,所以+20.如果有排序按钮要记得再加上24,排序按钮的宽度是24(可能还有边距/边框等值，需要根据实际情况加上)column.minWidth = width + 50;// 移除 document 中临时的 spandocument.querySelector('.getTextWidth').remove()return h('span', column.label);},
}
export default commonJS;

main.js引入：

// 全局实现表头自定义宽度的方法(方法名可以自定义)
import tableHeaders from '@/customTableHeaders'// 全局实现表头自定义宽度的方法
Vue.prototype.tableHeaders = tableHeaders

相应的table中：

<el-table>
//tableHeaders自定义的方法名，renderHeader自定义的变量名<el-table-column   :render-header="tableHeaders.renderHeader"></el-table-column>
</el-table>

element el-table（:render-header）实现动态表头的自适应相关推荐

element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
关于element table 动态表头+动态表头及内容+表格优化+初始化表格+隐藏功能，技术提升请来！
本篇文章属于升级版,欢迎交流指教~~ 导航: 表格头部与内容对不齐表格内容过长处理初始化闪过暂无数据动态表头1 动态表头+内容2 动态表头及层级表头 1.第一个就是表格头部与内容对不齐的问题了, ...
element 表格table纵横双列表头斜线样式处理和多级表头循环
element 表格table纵横双列表头斜线样式处理和多级表头循环 <!DOCTYPE html> <html> <head><meta charset= ...
element ui表格点击整行选择_element-ui实现动态表头的表格问题汇总
demo代码: el-table动态表头 {{tableBody[scope.$index][idx]}} 动态表格是生成列,也就是每一个然后再根据所有列去遍历生成行,这样一个过程,知道这些,要做的就 ...
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
layui表格——table.render(options)（转）
一.使用方法 1.在页面代码里写一个table标签和id属性 <table id="demo" lay-filter="test"></tab ...
DataTable动态表头
jsp部分(此处只有table 其他无关): <table id="dataTable" class="table table-striped table-list ...
layui 动态表头实现
最近写公司的 OA 遇到很多麻烦问题公司给我配的前端是个新来的实习生, 而且还不会用 layUI, 遇到问题从来不查文档, 都是张口就问: 这咋回事这里数据怎么没出来这里为什么报错一次两次还能 ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

element el-table（:render-header）实现动态表头的自适应

element el-table（:render-header）实现动态表头的自适应相关推荐

最新文章

热门文章