杭州网站建设响应式江苏建设厅执业网站

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

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

代码

<template><div><vxe-tablebordershow-footer:data="tableData":footer-data="footerData"><vxe-column type="seq" width="80"></vxe-column><vxe-column field="name" title="Name" width="300"></vxe-column><vxe-column field="age" title="Age" width="auto"></vxe-column><vxe-column field="sex" title="头部宽度 头部宽度 头部" width="auto"></vxe-column><vxe-column field="address" title="Address" width="auto"></vxe-column></vxe-table></div>
</template><script setup>
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’，包括列宽拖动等所有功能都能兼容。