el-table表格列宽禁止拖拽
时间: 2025-06-26 20:02:04 浏览: 10
### 禁用 `el-table` 表格列宽拖拽调整功能的方法
在使用 Element UI 的 `el-table` 组件时,默认情况下可以通过鼠标拖动来调整表格列的宽度。如果希望禁用这一功能,可以设置 `resizable` 属性为 `false` 来实现。
以下是具体方法:
#### 方法一:通过 `column` 配置项禁用单个列的拖拽调整
对于每一个需要禁用拖拽调整的列,在其对应的 `<el-table-column>` 中添加属性 `resizable="false"` 即可[^1]。
```vue
<template>
<el-table :data="tableData">
<!-- 禁用该列的拖拽调整 -->
<el-table-column prop="name" label="姓名" resizable="false"></el-table-column>
<el-table-column prop="age" label="年龄" ></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 }
]
};
}
};
</script>
```
#### 方法二:全局禁用所有列的拖拽调整
如果希望整个表格的所有列都不可调整宽度,则可以在每一列上统一设置 `resizable="false"` 或者动态控制列的配置对象中的 `resizable` 属性。
```javascript
const columns = [
{ prop: 'name', label: '姓名', resizable: false }, // 动态设置不可调整
{ prop: 'age', label: '年龄', resizable: false }
];
```
随后将这些列绑定到模板中即可。
---
#### 使用 Vite 和按需加载的情况下的注意事项
当项目采用 Vite 并按照需求引入组件时(如引用[3]所示),由于只导入了实际使用的部分组件,因此仍需确保正确注册并使用 `el-table` 及其子组件。例如,确认已在插件配置中包含了必要的解析器[^3]。
```javascript
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
};
```
这样能够保证即使启用了按需加载机制,也不会遗漏任何依赖关系。
---
#### 总结
无论是单独禁用某几列还是整体关闭列宽拖拽功能,都可以借助 `resizable` 属性完成操作。同时需要注意的是,在现代前端构建工具环境下(比如基于 Vite 构建的应用程序),应合理配置资源解析逻辑以支持所需的功能模块。
阅读全文
相关推荐


















