el-table去掉最外層的邊框線

el-table如果需要表頭可拖動就需要加上border屬性，但是加上border屬性可能會出現一些不願看到的樣式，如下圖所示

怎么樣去掉那些多余的邊框線呢？

1、打開f12來找對應的樣式

（1）下邊框樣式

從圖中可以看出這條邊框的樣式是

.el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
}

要想去掉這條線，可以設置

height: 0px;

（2）右邊框線

從圖中可以看出有效樣式是

.el-table--border::after {
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
}

想要去掉這條邊框線，可以設置

width: 0px;

（3）左和上的，找不到明確的，只能找范圍，仔細看

找了挺久，最后發現上和左的都是這個樣式設置的

.el-table--border {
    border: 1px solid #dfe6ec;
}

想要去掉，可以設置

.el-table--border {
  border: none;
}

或者

.el-table--border {
  border: 0px;
}

 

2、綜上，樣式設置為

.el-table::before {
  height: 0px;
}
.el-table--border::after {
  width: 0px;
}
.el-table--border {
  border: none;
}

3、或許會有人覺得，可能只需要設置

.el-table--border {
  border: none;
}

就可以了，實際上是不行的

所以那三個class的樣式都要設置。

4、可以設置在<style></style>里面，也可以設置在<style scoped></style>里面。

我都測試過了，可行

 

5、<style scoped>的意義

這里就大概說一下，scoped 修飾的style只給當前組件內的元素使用，而通過slot插槽插進來的元素，scoped就管不到了。

參考連接：https://www.cnblogs.com/zhenhunfan2/p/13879376.html

 或者你可以百度一下style scoped的意義