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

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

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

代码

<template>
  <div>
    <vxe-table
      border
      show-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’，包括列宽拖动等所有功能都能兼容。

原文地址：https://blog.csdn.net/abc26296/article/details/142366255

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！