uni-app中uni-table列宽如何自适应

在uni-app中，uni-table组件默认情况下并不直接支持列宽自适应功能。然而，我们可以通过自定义样式和一些JavaScript逻辑来实现列宽的自适应效果。以下是一个示例，展示如何通过CSS和JavaScript结合来动态设置uni-table的列宽，使其根据内容自适应。

示例代码

1. 模板部分（template）

<template>
  <view>
    <uni-table :columns="columns" :data="data">
      <uni-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :class="['custom-column', `column-${index}`]"
      />
    </uni-table>
  </view>
</template>

1. 脚本部分（script）

<script>
export default {
  data() {
    return {
      columns: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' },
        { label: 'Address', prop: 'address' }
      ],
      data: [
        { name: 'John Doe', age: 30, address: '123 Main St' },
        { name: 'Jane Smith', age: 25, address: '456 Elm St' }
      ]
    };
  },
  mounted() {
    this.adjustColumnWidths();
  },
  methods: {
    adjustColumnWidths() {
      const columns = document.querySelectorAll('.custom-column');
      columns.forEach((column, index) => {
        const textWidth = this.getTextWidth(column.innerText || '');
        column.style.width = `${textWidth + 50}px`; // +50 for padding, etc.
      });
    },
    getTextWidth(text) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = '16px Arial'; // Adjust font size and family as needed
      return ctx.measureText(text).width;
    }
  }
};
</script>

1. 样式部分（style）

<style scoped>
.custom-column {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

说明

• 模板部分：使用v-for循环生成uni-table-column，并为每个列添加自定义的CSS类custom-column和column-${index}，以便后续操作。
• 脚本部分：在mounted生命周期钩子中调用adjustColumnWidths方法，该方法使用getTextWidth函数计算文本宽度，并动态设置列的宽度。
• 样式部分：为自定义列添加样式，确保文本在必要时换行、截断或隐藏，以保持界面整洁。

这种方法虽然可以实现列宽的自适应，但需要注意性能问题，尤其是在数据量较大的情况下。如果需要更高效的解决方案，可能需要考虑使用第三方表格库或自定义更复杂的逻辑。