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+TS實(shí)現(xiàn)數(shù)字滾動效果CountTo組件
最近開發(fā)有個(gè)需求需要酷炫的文字滾動效果，發(fā)現(xiàn)vue2版本的CountTo組件不適用與Vue3,沒有輪子咋辦，那咱造一個(gè)唄，感興趣的小伙伴可以跟隨小編一起了解一下2022-11-11
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實(shí)現(xiàn)思路其實(shí)也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧2018-10-10
這篇文章主要介紹了Vue-Router在Vue2和Vue3中的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-06-06
vue代碼分割的實(shí)現(xiàn)(codesplit)
這篇文章主要介紹了vue代碼分割的實(shí)現(xiàn)(codesplit)，做了代碼分割后，會將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue slot與傳參實(shí)例代碼講解，在文章末尾給大家介紹了vue 利用slot向父組件傳值的方法,需要的朋友可以參考下2019-04-04
Vue使用lodop實(shí)現(xiàn)打印小結(jié)
這篇文章主要介紹了Vue使用lodop打印小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue項(xiàng)目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴，在vue項(xiàng)目的public/index.html文件里引入即可，本文通過示例代碼給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié)
這篇文章主要介紹了vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03