vue elementui 表设置

1 表头设置 样式 颜色 边框 –>header–cell–style

 <el-table  border 
            :header-cell-style="{ color: '#FFF', background: '#191919', border: '1px solid #222222' }"
            >

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

/*去掉左侧菜单自带的右侧边框*/
.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 每列单独设置颜色

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

            </el-table-column>

6 element–ui中使用Container 布局容器时出现白边问题–> app.vue ->设置样式

body{
    margin: 0px;
  }

参考:解决在element-ui中使用Container 布局容器时出现白边问题_顺晟科技

代码007普通

打赏 收藏 海报 链接