Element Plus 去掉表格外边框

使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式

css代码:

css 复制代码
<style lang="less" scoped>

// 表格右边框线
.el-table--border::after {
  width: 0;
}

// 表格上边框线
:deep(.el-table__inner-wrapper::after) {
  height: 0 !important;
}

// 表格左边框线
.el-table::before {
  width: 0 !important;
}
:deep(.el-table__border-left-patch) {
  background: transparent !important;
}

</style>
<style lang="less">
// 去掉中间线
.el-table--border .el-table__cell {
  border-right: 1px solid transparent;
}
</style>

表头加竖线:

css 复制代码
.el-table__header {
  .cell {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 16px;
      background: #dde2e9;
    }
  }
  .el-table__cell {
    &:last-child {
      .cell:after {
        width: 0;
      }
    }
  }
}
相关推荐
sp421 分钟前
使用 Vite 与 NativeScript
前端
zhedream2 分钟前
从模糊到清晰:一次组件重构里的开发哲学
vue.js
前端Hardy7 分钟前
GitHub 爆火!Three.js + React + ECharts 打造最强数据大屏
前端·javascript
如果超人不会飞7 分钟前
TinyRobot AI 对话组件库全组件使用指南
前端·vue.js
lichenyang4539 分钟前
ArkTS 资源与暗色模式:为什么我手机切暗色,App 内容区却不变
前端
老王以为27 分钟前
Claude Code 的产品哲学:当价值观成为架构
前端·claude·vibecoding
程序员黑豆31 分钟前
AI全栈开发 - Java:变量
java·前端·ai编程
tedcloud12334 分钟前
HyperFrames部署教程:用HTML生成MP4视频
前端·数据库·人工智能·html·音视频
江米小枣tonylua41 分钟前
真多线程!Bun作者要给JS大手术
前端