在 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 實現

• 響應式布局：結合窗口尺寸監聽