"element-ui": "^2.4.1"
"vue": "^2.5.16"
问题
table表格组建,列宽度自适应文本
嘿嘿,官方文档
不知道怎么用,我反正用了没有生效(2018.11.26)在官网测试的(找了一个最简单的例子,利用官方的在线运行测试,gg,没效果,顿时不知道这个属性是做什么用的了)
网上还有资料显示,最简单的方式,就是去掉列的宽度设置,看了几个,发现都是“蔡俊锋”这位前辈的博客,反正我这个环境是奇葩的都不行,所以自己来
思路:
遍历所有所有该列的单元格宽度,将最宽的宽度设置为该列的宽度
1.需要设定该列不换行 “show-overflow-tooltip”
2.需要一个判断文本的宽度,可以根据元素的字号*字数计算,我怕这里耽误时间,所以使用插槽的方式,包裹一个层span,计算span的宽度,就比较有保障,为了定位到span节点,采用了列的class-name属性,来给该列的单元格加上一个标记
3.使用双向绑定的方式,设置列的宽度 :width="xxxx"
4.找一个时机,计算该列的所有单元格最大的宽度设置为列的宽度,我的方式是监听table的data
注意:
计算最大宽度的时候,注意doc要先更新完成,所以要使用Vue.nextTick
宽度注意最小宽度,表头还占着宽度呢,本来想表头也放到计算里面,尝试了几个方式又是我的环境无法正确响应,比如slot="header" 设置无效,再比如render-header这个东西,直接吧<span>当成文本显示了,目前还没有找到如何让他解析html的方式,如果哪位又麻烦回复一下我,thank
实现:
<el-table-column label="组号" :width="drugColumnWidth.groupNo" align="center" class-name="table-drugs-groupno" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{scope.row.groupNo}}</span>
</template>
</el-table-column>
动态设置宽度
设置居中是为了在留出容错宽度的时候,不会显得这么空,特别我的组号还存在还是一位数字的列
设置列的单元格class,为了后期方便查找元素
给单元格的文本,增加span,为了计算宽度
watch:{
"你的data":{
var drugColumnMaxWidth = {
groupNo: 29
};
try {
for (let i = 1; i < document.getElementsByClassName("table-drugs-groupno").length; i++){
const element = document.getElementsByClassName("table-drugs-groupno")[i];
drugColumnMaxWidth.groupNo=drugColumnMaxWidth.groupNo<element.querySelectorAll('span')[0].offsetWidth
?element.querySelectorAll('span')[0].offsetWidth:drugColumnMaxWidth.groupNo;
}
//避免宽度小数+1,计算变宽宽度+1,20是内边距;+5是为了容错
this.drugColumnWidth.groupNo=drugColumnMaxWidth.groupNo+2+20;
} catch (error) {
console.error(error);
}
}
}
+2+20,20是单元格的内边距,+2包含了两个,一个是offsetWidth没有小数,但是宽度会又小数,怕offsetWidth小于实际宽度;还有1,是边框;