el-table横向网格展示

1el-table横向网格原理

table tr原本只能单行展示
但是特殊在，只要变成flex弹性布局后。
el-table基于以下css参考，就可以实现点击切换，展示横向网格型。

image.png

2css实现

el-table中修改表格样式
1.改变表格标题样式：
/deep/ .el-table thead th
/deep/ .el-table thead tr
2.改变表格行数据样式：
/deep/ .el-table td
/deep/ .el-table tr
.el-table, .el-table__expanded-cell
3.表格行在鼠标经过的时候会有默认背景色，改变背景色颜色
/deep/ .el-table__body tr:hover>td
//========================================》参考
 // 表头
  /deep/ table {
    display:flex;
    justify-content: flex-start;
    flex-wrap:wrap;
  }
  /deep/ .el-table thead tr {
    display:none
  }

  // 表行
  /deep/ .el-table tr {
    position: relative;
    display: inline-block;//转换行内快元素，排列
  }
  /deep/ .el-table td {//设置方块大小
    width:
    height:
  }
  /deep/ .el-table td:nth-of-type(1) {//做些单行内，部分元素隐藏
}
...

ps：【参考来源】
（https://www.cnblogs.com/5201314m/p/12337238.html）
（https://blog.csdn.net/aliven1/article/details/99689088）