(几乎)完美实现 el-table 列宽自适应
背景
Element UI 是 PC 端比较流行的 Vue.js UI 框架,它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求,组件本身可能没办法满足。最近在项目里就碰到了。
很多页面都需要用到表格组件el-table
。如果没有给el-table-column
指定宽度,默认情况下会平均分配给剩余的列。在列数比较多的情况,如果el-table
宽度限定在容器内,单元格里的内容就会换行。强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断。
产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column
是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。
技术方案
于是想到了动态计算内容宽度的方案。网上也有人提过这个思路,做法是根据内容字符数来计算宽度。这种方法有几个局限:
- 内容必须是文本
- 不同字符宽度不一,结算结果不够准确
- 需要在渲染前操作数据,不利于解耦
我采用了另一种思路,还是动态计算内容宽度,但是根据实际渲染后的 DOM 元素宽度,这样就能解决上面三个问题。
具体怎么做呢?通过查看渲染后的 DOM 元素发现,el-table
的表头和内容分别用了一个原生table
,通过colgroup
设置每列的宽度。就从这里入手,col
的name
属性值和对应的 td
的class
值是一致的,这样就可以遍历对应列的所有单元格,找出宽度最大的单元格,用它的内容宽度加上一个边距作为该列的宽度。
具体实现
怎么计算内容宽度呢?这是个比较关键的步骤。渲染后的每个单元格有个.cell
类,用white-space: nowrap; overflow: auto;
设置为不允许换行,内容超出后可滚动,同时设置display: inline-block;
以便计算实际内容宽度。这样,最终的宽度可通过.cell
元素的scrollWidth
属性得到。
function adjustColumnWidth(table) {
const colgroup = table.querySelector("colgroup");
const colDefs = [...colgroup.querySelectorAll("col")];
colDefs.forEach((col) => {
const clsName = col.getAttribute("name");
const cells = [
...table.querySelectorAll(`td.${clsName}`),
...table.querySelectorAll(`th.${clsName}`),
];
// 忽略加了"leave-alone"类的列
if (cells[0]?.classList?.contains?.("leave-alone")) {
return;
}
const widthList = cells.map((el) => {
return el.querySelector(".cell")?.scrollWidth || 0;
});
const max = Math.max(...widthList);
const padding = 32;
table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {
el.setAttribute("width", max + padding);
});
});
}
中间的探索过程比较繁琐,但最终的代码实现却非常简洁。在什么时候触发列宽计算呢?自然是组件渲染完成后。为了方便重用,我采用了 Vue 自定义指令的方式。
Vue.directive("fit-columns", {
update() {},
bind() {},
inserted(el) {
setTimeout(() => {
adjustColumnWidth(el);
}, 300);
},
componentUpdated(el) {
el.classList.add("r-table");
setTimeout(() => {
adjustColumnWidth(el);
}, 300);
},
unbind() {},
});
更进一步,我封装了一个 Vue 插件叫v-fit-columns
,已经发布到 npm 仓库,直接安装即可使用。
安装:
npm install v-fit-columns --save
引入:
import Vue from 'vue';
import Plugin from 'v-fit-columns';
Vue.use(Plugin);
使用:
<el-table v-fit-columns>
<el-table-column label="No." type="index" class-name="leave-alone"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Age" prop="age"></el-table-column>
</el-table>
源码仓库在这:https://github.com/kaysonli/v-fit-columns ,欢迎各位不吝赐教和 Star!
总结
这个方案多少有点 Hack 的意味,只顾实现需求,可能在其他方面还有点瑕疵,比如渲染完后会稍微闪一下(因为要重新调整宽度,会出现 reflow)。不过从最终实现的效果来看,还算令人满意,至少产品经理提着他的两米大刀走了……他可是为了这个效果,蹲守在我电脑前半个下午,非要我实现不可!在手摸手的胁迫下,总算完事交差了……
看在这个logo的份上,不来关注下吗?
(几乎)完美实现 el-table 列宽自适应的更多相关文章
- NPOI 列宽自适应 代码示例
//列宽自适应,只对英文和数字有效 for (int i = 0; i <= maxColumn; i++) { sheet.AutoSizeColumn(i); } //获取当前列的宽度,然后 ...
- POI导出excel列宽自适应
让单元格宽度随着列和单元格值的宽度自适应: //存储最大列宽 Map<Integer, Integer> maxWidth = new HashMap<>(); // 将列头设 ...
- ListView列宽自适应,设置ListView.Column[0].Width := -1;
使用TListView列表显示内容,如果列内容过长,就会显示成‘XXX…’形式,此时如果双击列标题,列宽将变为自适应.用代码设置如下: 1.设置ListView.Column[0].Width := ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- easyUI datagrid 列宽自适应(简单 图解)(转)
响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...
- highchart 柱状图,列宽自适应(x轴是时间的特殊情况)
1.柱子列宽自适属性: pointWidth:25, //柱子宽度,如果设定该值,则下面2个属性无效 pointPadding: 0.4,//每列之间的距离值,默认此值为0.1 groupPaddin ...
- VC CListCtrl 第一列列宽自适应
原文链接: http://www.cnblogs.com/sephil/archive/2011/04/03/2004384.html 今天用VC写工具的时候用到CListView,并且ListCtr ...
- datatables定义列宽自适应方法
不同的分辨率以及浏览器自适应,列表不出现滚动条,表格内容自动换行. 方法:通过定义表格列属性,结合<table>CSS样式和定义的列单元格样式 'td_huanhang'/'td_unhu ...
- easyui datagird 列宽自适应
代码如下: onLoadSuccess: function (data) { var rows = data.rows; //得到行数据 var columnMaxCharacter = new Ar ...
随机推荐
- Skill 脚本演示 ycChangeLayerToEntry.il
https://www.cnblogs.com/yeungchie/ ycChangeLayerToEntry.il 快速切换选中 figs 的 lpp(Layer-Purpose Pair). 回到 ...
- SpringClould进行Devtools热部署
当我们在使用SpringCloud搭建项目的时候,会有多个项目,每次修改东西的时候,都需要重新启动项目,这样的操作就比较繁琐. 为了提高工作的效率,避免每次频繁的重启项目,在子类pom文件中,我们可以 ...
- python数据可视化编程实战PDF高清电子书
点击获取提取码:3l5m 内容简介 <Python数据可视化编程实战>是一本使用Python实现数据可视化编程的实战指南,介绍了如何使用Python最流行的库,通过60余种方法创建美观的数 ...
- 苹果挖矿恶意程序处理(OSX/CoinMiner.X)
背景 近期通过流量告警发现多起外连矿池的告警,均外连至43.249.204.231 威胁情报信息如下: 系统表象 1.通过ps -ef|grep osascript发现在/library/Launch ...
- Kaggle-pandas(3)
Summary-functions-and-maps 教程 在上一教程中,我们学习了如何从DataFrame或Series中选择相关数据. 正如我们在练习中所展示的,从我们的数据表示中提取正确的数据对 ...
- IDEA必备插件系列-Rainbow Brackets(彩虹括号)
Rainbow Brackets ,就是彩虹括号,各种鲜明颜色的括号 这个一个开源的项目: https://github.com/izhangzhihao/intellij-rainbow-brack ...
- Java web 小测验
题目要求: 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成.(1分) 3性别:要求用单 ...
- 用 Python 下载抖音无水印视频
说起抖音,大家或多或少应该都接触过,如果大家在上面下载过视频,一定知道我们下载的视频是带有水印的,那么我们有什么方式下载不带水印的视频呢?其实用 Python 就可以做到,下面我们来看一下. 很多人学 ...
- CSS漂亮盒子(下)
4.多重背景 CSS支持一个元素设置多个背景图片. 每个背景属性有相应的多值语法,多个值由逗号分隔. .multi-bg-shorthand { width: 300px; height: 200px ...
- 解决drf_yasg中的SwaggerAPI无法正确分组问题
swagger是后台开发中很好用的交互式文档,Django原本的Django-Swagger已经停止维护了,现在一般用drf_yasg这个包来实现文档,它里面支持swagger和redoc两种,red ...