Vxe UI vue vxe-table 实现自适应列宽，根据内容自适应列的宽度

Vxe UI vue vxe-table 实现自适应列宽，根据内容自适应列的宽度

之前老版本是通过计算字符数量，然后给动态给每一列设置宽度，不仅麻烦，还不好复用。
看了 API 发现 v4.7+ 和 v3.9+ 版本已经直接就能支持了，只需加上 width=‘auto’ 就能自适应宽度。

代码

<template><div><vxe-tablebordershow-footer:data="tableData":footer-data="footerData"><vxe-columntype="seq"width="80"></vxe-column><vxe-columnfield="name"title="Name"width="300"></vxe-column><vxe-columnfield="age"title="Age"width="auto"></vxe-column><vxe-columnfield="sex"title="头部宽度 头部宽度 头部"width="auto"></vxe-column><vxe-columnfield="address"title="Address"width="auto"></vxe-column></vxe-table></div></template><scriptsetup>import{ ref }from'vue'const tableData =ref([{id:10001,name:'Test1',role:'Develop Develop Develop ',sex:'Man',age:28,address:'内容宽度'},{id:10002,name:'Test2',role:'Test Test Test Test Test Test Test',sex:'Women',age:22,address:'内容宽度 内容宽度 内容宽度 内容宽度 内容宽度 内容宽度'},{id:10003,name:'Test3',role:'PM',sex:'Man',age:32,address:'内容宽度 内容宽度 内容宽度 内容'}])const footerData =ref([{age:'尾部宽度 尾部宽度 尾部'}])</script>

确实完美，所有列都能根据内容自适应宽度，
支持 width=‘auto’、min-width=‘auto’，包括列宽拖动等所有功能都能兼容。