快捷導(dǎo)航

Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼

更新時(shí)間：2025年04月14日 10:42:18 作者：意桉

使用el-table組件拖拽時(shí),?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧

使用el-table組件拖拽時(shí)，想使用自定義樣式進(jìn)行拖拽, 想去掉外邊框，并在表頭加入豎杠樣式

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>

表頭加豎線：

.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;
      }
    }
  }
}

到此這篇關(guān)于Element Plus 去掉表格外邊框的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)Element Plus 表格外邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3系列之effect和ReactiveEffect?track?trigger源碼解析
這篇文章主要為大家介紹了Vue3系列之effect和ReactiveEffect?track?trigger源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中的slot使用插槽分發(fā)內(nèi)容的方法
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
Vue父組件調(diào)用子組件事件方法
下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue富文本編輯器組件vue-quill-edit使用教程
這篇文章主要為大家詳細(xì)介紹了vue富文本編輯器組件vue-quill-edit的使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
Vue指令系統(tǒng)之事件處理與表單綁定從入門到精通全解析
Vue.js作為當(dāng)下最流行的前端框架之一,其指令系統(tǒng)是Vue最核心的特性之一,這篇文章主要介紹了Vue指令系統(tǒng)之事件處理與表單綁定從入門到精通的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-11-11
Vue?socket.io模塊實(shí)現(xiàn)聊天室流程詳解
vue-socket.io其實(shí)是在socket.io-client（在瀏覽器和服務(wù)器之間實(shí)現(xiàn)實(shí)時(shí)、雙向和基于事件的通信）基礎(chǔ)上做了一層封裝，將socket掛載到vue實(shí)例上，同時(shí)可使用sockets對象輕松實(shí)現(xiàn)組件化的事件監(jiān)聽，在vue項(xiàng)目中使用起來更方便
2022-12-12
vue_drf實(shí)現(xiàn)短信驗(yàn)證碼
我們在做網(wǎng)站開發(fā)時(shí)，登錄頁面很多情況下是可以用手機(jī)號接收短信驗(yàn)證碼，本文主要介紹了vue_drf實(shí)現(xiàn)短信驗(yàn)證碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue實(shí)現(xiàn)用戶沒有登陸時(shí),訪問后自動(dòng)跳轉(zhuǎn)登錄頁面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶沒有登陸時(shí)，訪問后自動(dòng)跳轉(zhuǎn)登錄頁面,定義路由的時(shí)候配置屬性，這里使用needLogin標(biāo)記訪問頁面是否需要登錄，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-02-02
Vue3之 Vue CLI多環(huán)境配置
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說就是使用配置文件來管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11