vue elementui 表设置

本文介绍: 1 表头设置样式颜色边框 –&g t;header–cell–style。3 给容器内部的 table 添加背景色并设置边框。2 el–s ide 中列表的右边边框不显示。4 给table 设置行高。

 &lt;el-table  border 
            :header-cell-style="{ color: '#FFF', background: '#191919', border: '1px solid #222222' }"
            &gt;

2 el–s ide 中列表的右边边框不显示

/*去掉左侧菜单自带的右侧边框*/
.el-menu-vertical-demo {
  // F12 Elments 查看class
  border-right: none !important;
}

3 给容器内部的 table 添加背景色并设置边框

.main-left /deep/ .el-table {
  // 给容器内部的 表格添加背景色
  background-color: #191919 !important;
  margin: 0; // div 四周不留白
  padding: 0; // div 四周不留白

  border: 1px solid #222222; // div 边框设置颜色 https://blog.csdn.net/qq_47354826/article/details/116211265

}

4 给table 设置行高

.el-main {

  line-height: 20px !important; //设置table 表头行高

}

5 table 每列单独设置颜色

&lt;el-table-column prop="instId" label="名称" width="100px"&gt;
              &lt;!-- //用插槽的方法来改变颜色! --&gt;
              <template slot-scope="scope">
                <div style="color: #FEC53F">
                <!--下面用 prop 的值-->
                  {{ scope.row.instId }}
                </div>
              </template>

            </el-table-column>