關於vue 中elementui 的表格邊框隱藏

最近寫到一個項目需要實現邊框隱藏，網上查找了好多筆記，回答都好含糊不清。為此，記錄一下自己的實現方法：

需求：

　　要將如下表格邊框去除                   效果圖：

　　　　                             

官方文檔一個borde屬性可以去除邊框（點此查看 ），但是那只是控制縱向邊框，這里主要是要解決橫向邊框，所以我通過f12對頁面進行調試，得到解決方法。

附上代碼：

<style>
 .container_lefts .el-table td,
  .container_lefts .el-table th.is-leaf,
  .container_lefts .el-table--border,
  .container_lefts .el-table--group {
    border: none;
    cursor: pointer;
  }
  .container_lefts .el-table::before {
    height: 0;
  }
</style>

注意：1、此處的.container_lefts 要更改為你的el-table標簽的父標簽類名 不然不能生效。

　　　2、如果你和我一樣是在vue項目中使用，這一段css樣式不能寫在<style scoped="scoped">中，不然可能會不生效。可以另外在底下在寫一個<style>標簽然后在里面編寫樣式。

　　　　

最后就可以實現預期效果啦！