elementui table列宽自适应,el-table高度自适应
本文主要介绍vue对el-table列宽适配的完美实现。对vue感兴趣的同学可以参考一下。
目录
背景技术方案具体实施概要
背景
Element UI是PC上比较流行的Vue.js UI框架，其组件库基本可以满足大多数常见的业务需求。但是有时会有一些高度定制化的需求，组件本身可能无法满足。最近在项目里遇到的。
许多页面需要使用表格组件el-table。如果没有指定el-table-column的宽度，默认情况下，它将平均分布到其余的列。在大量列的情况下，如果el-table的宽度被限制在容器内，则单元格中的内容将换行。如果不强制换行，内容将在单元格内滚动或溢出或被截断。
产品的预期效果是内容显示在一行中，列间距一致，允许表格水平滚动到容器之外。El-table-column支持设置固定宽度，在内容宽度可预测的情况下，也可以满足这个需求。问题是如何动态调整列宽以适应内容宽度。我在官方文档中也没有找到这样的选项，因为组件本身不支持。
技术方案
为此，提出了一种动态计算内容宽度的方案。网上也有人提到过这个思路，就是根据内容中的字符数来计算宽度。这种方法有几个局限性：
内容必须是文本。
不同的字符宽度不同，结算结果不够准确。
渲染前需要对数据进行操作，不利于解耦。
我采用了另一种思路，就是动态计算内容宽度，但是根据渲染后DOM元素的实际宽度，这样就可以解决以上三个问题。
具体怎么做？通过查看渲染的DOM元素，发现el-table的表头和内容分别使用了一个原生表格，每列的宽度由colgroup设置。从这里开始，col的name属性的值与相应的td的class值一致，这样就可以遍历相应列中的所有单元格，找到宽度最大的单元格，并使用其内容宽度加上一个边距作为列的宽度。
具体实现
内容宽度怎么算？这是关键的一步。呈现后，每个单元格都有一个. cell类，使用空白：nowrap溢出：自动；设置为不允许换行，内容超过时滚动，设置display:inline-block；以便计算实际内容宽度。这样，就可以通过。细胞元素。
函数adjustColumnWidth(table) {
const colgroup=table . query selector( colgroup )；
const colDefs=[.colgroup . queryselectorall( col )]；
colDefs.forEach((col)={
const cls name=col . get attribute( name )；
常量单元格=[
.table.querySelectorAll(`td。${clsName} `)，
.table.querySelectorAll(`th。${clsName} `)，
];
//忽略添加了“leave-alone”类的列。
if(单元格[0]？classList？包含？(不要管){
返回；
}
const width list=cells . map((El)={
返回el.querySelector(。单元格’)？scroll width 0；
});
const max=Math.max(.width list)；
const padding=32
table . query selector all(` col[name=$ { clsName }]`)。forEach((el)={
el.setAttribute(width ，最大填充)；
});
});
}
中间的探索过程比较复杂，但是最终的代码实现非常简洁。何时触发列宽计算？自然组件渲染完成后。为了便于重用，我采用了Vue自定义指令的方法。
Vue.directive(fit-columns ，{
update() {}，
bind() {}，
已插入(el) {
setTimeout(()={
adjustColumnWidth(El)；
}, 300);
},
componentUpdated(el) {
El . class list . add( r-table )；
setTimeout(()={
adjustColumnWidth(El)；
}, 300);
},
unbind() {}，
});
再者，我打包了一个叫v-fit-columns的Vue插件，已经发布到npm仓库，安装后可以直接使用。
安装：
npm安装v-fit-列-保存
简介：
从“Vue”导入Vue；
从“v-fit-columns”导入插件；
Vue.use(插件)；
使用：
El-表v-适合-列
El-table-column label= no . type= index class-name= leave-alone /El-table-column
el-table-column标签=Name 属性=name/el-table-column
el-table-column标签=年龄属性=年龄/el-table-column
/el-table
源代码在这里：https://github.com/kaysonli/v-fit-columns,欢迎您的评论和星级！
总结
这个方案有点黑，只着眼于要求，其他方面可能会有一些瑕疵，比如渲染后会有轻微的闪光(因为宽度会重新调整，会出现回流)。不过从最后的效果来看，还是比较满意的。
以上就是vue完美实现el-table列宽适配的细节。更多关于vue实现el-table列宽适配的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。