el-table怎么实现不显示边框还能拖拽列宽？

Question

如图没有边框就不能改变列宽了：

我想要：不显示边框+可拖拽列宽

Answer 1

让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

如果答案让您满意，请采纳、点赞、关注，非常感谢！
.  
每日一句正能量，让它带给您好心情：每朵花的绽放，都有自己的节奏。
.  

要实现 Element UI 的 el-table 不显示边框但保留列宽拖拽功能，可以通过以下 CSS 和属性配置实现：

解决方案

1. 隐藏边框但保留拖拽线

/* 隐藏所有边框 */
.el-table {
 border: none;
}
.el-table__header-wrapper, .el-table__body-wrapper {
 border: none;
}
.el-table th, .el-table td {
 border: none;
}


/* 保留拖拽线 */
.el-table--border th.gutter:last-of-type {
 border-left: 1px solid #EBEEF5;
}
.el-table__body-wrapper::-webkit-scrollbar {
 width: 6px;
}

1. 表格配置

<el-table
 :data="tableData"
 border={false} // 禁用默认边框
 :header-cell-style="{border: 'none'}" // 表头无边框
 :cell-style="{border: 'none'}" // 单元格无边框
 style="width: 100%">
 <el-table-column prop="name" label="名称" width="180"></el-table-column>
 <!-- 其他列... -->
</el-table>

关键点说明

1. border={false} 禁用默认边框样式
2. 通过 CSS 彻底清除所有边框线
3. 保留表头最后一列的 gutter（用于拖拽的隐形列）
4. 拖拽功能是 Element UI 默认支持的，只要不破坏表头结构就会保留

注意事项

• 如果表格需要横向滚动，需保留滚动条样式
• 在深色背景下可能需要调整拖拽线的颜色（示例中的#EBEEF5）
• 此方案在 Element UI 2.x 版本测试通过，如果使用其他版本可能需要微调