欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 幼教 > Vxe UI vue vxe-table 实现自适应列宽,根据内容自适应列的宽度

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

2024/10/24 23:23:07 来源:https://blog.csdn.net/abc26296/article/details/142366255  浏览:    关键词: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-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’,包括列宽拖动等所有功能都能兼容。

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com