Element UI table表格组建，列宽度自适应文本

"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，是边框；   

 

上面的写法还恨粗糙，还需要把他继续封装，今天就提供个思路，供大家使用

另外不是特殊要求，不建议这么使用，感觉太多的计算，影响性能