避免 iView 折叠面板中表格宽度显示异常的实用技巧

2023-12-06 22:08:01

技巧：使用 iView 的表格中的固定宽度来解决折叠面板中表格的宽度问题

问题

在使用 iView 的 Collapse 组件时，如果在其中嵌入了 Table，可能会遇到以下问题：

当折叠面板处于折叠状态时，表格的宽度可能显示不正常，例如宽度过窄或过宽。
当折叠面板处于展开状态时，表格的宽度可能会根据其内容动态变化，导致显示不美观或影响交互体验。

原因分析

出现上述问题的原因是，在 iView 中，Collapse 组件使用 flex 布局来实现折叠和展开操作。在这种布局方式下，内部元素的宽度会根据其内容和父元素的宽度自动调整。因此，当表格的内容发生变化或折叠面板处于折叠状态时，表格的宽度也会随之变化，导致显示异常。

解决办法

为了解决这个问题，可以给表格的每一列设置固定的宽度。这可以通过设置表格的 column 属性中的 width 属性来实现。

<template>
  <Collapse>
    <Panel>
      <Table
        :columns="columns"
        :data="data"
      />
    </Panel>
  </Collapse>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          width: 100,
        },
        {
          title: '年龄',
          width: 50,
        },
        {
          title: '性别',
          width: 80,
        },
      ],
      data: [
        {
          name: '小明',
          age: 18,
          gender: '男',
        },
        {
          name: '小红',
          age: 19,
          gender: '女',
        },
      ],
    };
  },
};
</script>