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;
      }
    }
  }
}
相关推荐
前端Hardy几秒前
HTML&CSS:超好看的数据卡片
前端·javascript·html
牧码岛1 分钟前
Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility
前端·css·vue·html·web·web前端
CUIYD_19894 分钟前
Vue 中组件命名与引用
javascript·vue.js·node.js
面朝大海,春不暖,花不开5 分钟前
Spring Boot MVC自动配置与Web应用开发详解
前端·spring boot·mvc
知否技术5 分钟前
2025微信小程序开发实战教程(一)
前端·微信小程序
玲小珑6 分钟前
Auto.js 入门指南(五)实战项目——自动脚本
android·前端
Sparkxuan7 分钟前
IntersectionObserver的用法
前端
玲小珑7 分钟前
Auto.js 入门指南(四)Auto.js 基础概念
android·前端
全栈技术负责人7 分钟前
Webpack性能优化:构建速度与体积优化策略
前端·webpack·node.js
爱吃肉的小鹿9 分钟前
浏览器渲染的核心流程及详细解析(2025.6月最新)
前端