Vue项目中，表格边框样式::v-deep报错

解决 Vue 中修改 Element Plus 表格边框样式报错问题

在使用 Vue 开发项目时，我们经常需要自定义 Element Plus 组件的样式。最近在调整 el-table 的边框样式时，遇到了一个常见的错误：

.el-table::v-deep .el-table__cell {
   border-right: 1px solid #ebeef5;
   &:not(:last-child) {
     border-right: 1px solid #ebeef5;
   }
}

这段代码在编译时会出现语法错误，导致样式不生效。下面我们来分析原因并提供解决方案。

---

问题原因分析

1. 深度选择器语法错误

Vue 3+ 项目中推荐使用 :deep() 替代 ::v-deep：

- .el-table::v-deep .el-table__cell
+ .el-table :deep(.el-table__cell)

2. 嵌套语法需要预处理器支持

&:not(:last-child) 是 Sass/SCSS 的嵌套写法，必须在 <style> 标签中声明 lang="scss"：

<style scoped lang="scss">
/* SCSS 嵌套语法 */
</style>

3. 冗余样式定义

原始代码中重复定义了相同的 border-right 属性，可以简化。

---

解决方案

方案一：使用 SCSS 语法（推荐）

<style scoped lang="scss">
.el-table {
  :deep(.el-table__cell) {
    border-right: 1px solid #ebeef5;
    
    &:not(:last-child) {
      border-right: 1px solid #ebeef5;
    }
  }
}
</style>

方案二：使用普通 CSS 语法

<style scoped>
.el-table :deep(.el-table__cell) {
  border-right: 1px solid #ebeef5;
}

.el-table :deep(.el-table__cell):not(:last-child) {
  border-right: 1px solid #ebeef5;
}
</style>

---

关键修正点

1. 深度选择器更新：

   • Vue 3+ 使用 :deep(.selector) 语法
   • Vue 2 项目可用 /deep/ 或 ::v-deep

2. 启用预处理器：

   <!-- 添加 lang="scss" 支持嵌套语法 -->
   <style scoped lang="scss">
   

3. 样式优化：

   /* 简化后的写法 */
   .el-table :deep(.el-table__cell) {
     border-right: 1px solid #ebeef5;
   }
   

---

最终效果

正确配置后，表格单元格将显示统一的右侧边框：

/* 实际渲染效果 */
.el-table .el-table__cell {
  border-right: 1px solid #ebeef5;
}

注意：Element Plus 默认已为表格添加边框样式，此示例仅用于演示自定义样式的方法。

---

总结

在 Vue 中修改第三方组件样式时，需要注意：

1. 使用正确的深度选择器语法（:deep()）
2. 使用 SCSS 语法时需声明 lang="scss"
3. 避免重复定义相同样式
4. 优先使用类选择器而非元素选择器

通过遵循这些最佳实践，可以避免样式作用域问题，实现灵活的自定义样式效果。

小技巧：在浏览器开发者工具中直接调试样式，然后将调试好的样式通过深度选择器写入项目代码中，可以大大提高效率。