表格自适应列宽

在设计表格列宽时，为了避免在宽屏显示器环境下因固定列宽设置导致列内容无法充分利用屏幕宽度而出现表格右侧留白的情况，特别是在处理动态列表格时，需要特别注意调整列宽策略。必须确保至少有一列被设置为可自适应或相对宽度，考虑为某些关键列设定最小宽度，以保证在任何分辨率下都能正常显示且不影响整体布局美观度。

错误示例

正确示例

关键点在于需要给至少一列的宽度设置为最小宽度, 一般建议给较为关键的列添加 min-width 属性; 在动态列时, 使用 min-width 属性代替 width 属性;
el-table 表格与 vxe-table 该属性同样支持, 处理方法一致;

vue

<!--表格列宽设置最小宽度-->
<template>
  <!-- 容器 -->
  <div class="bgwh p10">
    <!-- 表格区域 -->
    <vxe-table
      border
      :height="tableHeight"
      :data="tableData"
      show-overflow
      :header-cell-style="TABLE_HEADER_CELL_STYLE"
      :cell-style="TABLE_CELL_STYLE"
    >
      <vxe-table-column
        v-for="col in tableColumnList"
        :key="col.field"
        :field="col.field"
        :title="col.title"
        header-align="center"
        align="left"
        :min-width="col.width"
      ></vxe-table-column>
      <vxe-table-column
        title="操作"
        header-align="center"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <span class="bs-color-primary poi" @click="handleAudit(scope.row)"
            >审核</span
          >
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import {
  innerHeight,
  TABLE_HEADER_CELL_STYLE,
  TABLE_CELL_STYLE,
} from '@/mixin/page';
export default {
  mixins: [innerHeight],
  data() {
    return {
      tableData: [], // 表格数据
      tableColumnList: [
        { field: 'projectCode', title: '项目编码', width: 120 },
        { field: 'projectName', title: '项目名称', width: 120 },
        { field: 'auditState', title: '审核状态', width: 120 },
      ], // 表格列数据
      TABLE_CELL_STYLE,
      TABLE_HEADER_CELL_STYLE,
    };
  },
  methods: {
    /**
     * 审核点击事件
     * @param row
     */
    handleAudit(row) {},
  },
  computed: {
    tableHeight() {
      return this.innerHeight - 200;
    },
  },
};
</script>

表格自适应列宽 ​

错误示例 ​

正确示例 ​

表格自适应列宽

错误示例

正确示例