Vue3+Element Plus动态表格列宽设置

在 Vue3 + Element Plus 中实现动态设置表格列宽，可以通过以下几种方式实现：

方法 1：动态绑定 width 属性（推荐）

vue

复制

下载

<template><el-table :data="tableData" style="width: 100%"><!-- 动态绑定 width --><el-table-columnprop="name"label="姓名":width="dynamicWidth"/><!-- 其他列 --></el-table><el-slider v-model="dynamicWidth" :min="100" :max="300" />
</template><script setup>
import { ref } from 'vue';const dynamicWidth = ref(150); // 初始宽度
const tableData = ref([{ name: '张三', age: 30 },{ name: '李四', age: 25 }
]);
</script>

方法 2：使用响应式对象管理列配置

vue

复制

下载

<template><el-table :data="tableData"><el-table-columnv-for="col in columns":key="col.prop":prop="col.prop":label="col.label":width="col.width"/></el-table><el-button @click="resizeColumn">调整第一列宽度</el-button>
</template><script setup>
import { ref } from 'vue';const columns = ref([{ prop: 'name', label: '姓名', width: 120 },{ prop: 'age', label: '年龄', width: 80 }
]);const resizeColumn = () => {columns.value[0].width = Math.floor(Math.random() * 200 + 100);
};
</script>

方法 3：结合拖拽事件动态调整（高级）

vue

复制

下载

<template><el-table :data="tableData"@header-dragend="handleResize"><el-table-columnprop="name"label="姓名（可拖拽）"width="150"resizable/><!-- 其他列 --></el-table>
</template><script setup>
const handleResize = (newWidth, oldWidth, column) => {console.log('列宽变化:', {column: column.label,oldWidth,newWidth});// 这里可以保存新的宽度到数据库或状态管理
};
</script>

方法 4：响应式设置最小/最大宽度

vue

复制

下载

<el-table-columnprop="email"label="邮箱":min-width="100":width="emailWidth"
/>

注意事项：

1. 单位处理：

   • 数字值默认单位为 px

   • 可使用字符串指定单位：:width="'20%'"

2. 性能优化：

   vue

   复制

   下载

   <el-table :data="tableData" table-layout="fixed"><!-- 固定布局模式下宽度分配更精确 -->
   </el-table>

3. 响应式断点：

   js

   复制

   下载

   import { useWindowSize } from '@vueuse/core';const { width } = useWindowSize();
   const dynamicWidth = computed(() => {return width.value < 768 ? 100 : 200;
   });

4. 动态隐藏列：

   vue

   复制

   下载

   <el-table-columnv-if="showColumn"prop="address"label="地址"width="200"
   />

完整示例（动态调整 + 保存配置）：

vue

复制

下载

<template><el-table :data="tableData" @header-dragend="saveColumnWidth"><el-table-columnv-for="col in columns":key="col.prop"v-bind="col"resizable/></el-table>
</template><script setup>
import { ref, onMounted } from 'vue';// 列配置（从本地存储加载或使用默认值）
const columns = ref([{ prop: 'name', label: '姓名', width: loadWidth('name', 120) },{ prop: 'age', label: '年龄', width: loadWidth('age', 80) },{ prop: 'email', label: '邮箱', width: loadWidth('email', 200) }
]);// 加载保存的宽度
function loadWidth(prop, defaultValue) {const saved = localStorage.getItem(`colWidth_${prop}`);return saved ? parseInt(saved) : defaultValue;
}// 保存列宽
const saveColumnWidth = (newWidth, oldWidth, column) => {const prop = column.property;localStorage.setItem(`colWidth_${prop}`, newWidth);
};// 表格数据
const tableData = ref([...]);
</script>

常见问题解决：

1. 宽度不生效：

   • 确保父容器有明确宽度

   • 添加 CSS：.el-table { table-layout: fixed; }

2. 拖拽卡顿：

   • 减少表格数据量

   • 使用虚拟滚动：<el-table-v2>

3. 自适应内容宽度：

   js

   复制

   下载

   const autoWidth = ref(0);
   onMounted(() => {// 根据内容计算宽度（示例）autoWidth.value = Math.max(...tableData.value.map(d => d.name.length * 10));
   });

选择合适的方法取决于你的具体需求：

• 简单动态调整：使用方法 1

• 复杂表格配置：使用方法 2

• 需要保存用户设置：结合 localStorage 实现

• 响应式布局：结合窗口尺寸监听