修改el-dialog和el-table默认样式

头发还有嘛

已于 2022-10-19 16:31:13 修改

阅读量695

点赞数

文章标签： vue.js css javascript

于 2022-10-19 16:27:20 首次发布

本文链接：https://blog.csdn.net/SuMakabaka/article/details/127410667

版权

1. html部分

<el-dialog
  :visible.sync="dialogTableVisible"
            custom-class="eldialog"
            :modal-append-to-body="false"
            class="dialogclass"
          >
            
              <el-table
                :data="usersList"
                height="550"
              >
                <el-table-column
                  property="realname"
                  label="用户名"
                  width="150"
                ></el-table-column>
              </el-table>
           
          </el-dialog>

2. css部分

//dialog弹框内设置背景图片
.eldialog {
  background: url(../assets/picture/right_top_bg.png) no-repeat;
  background-size: 100% 100%;
}

//设置dialog遮罩层颜色
.dialogclass.el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.5);
}

//el-table设置背景透明

.el-table {
  background-color: transparent !important;
}

.el-table th {
  color: #1addde; /* 字体颜色 */
  font-size: 18px;
  background-color: transparent !important; /* 背景透明 */
  border: 0;
  height: 30px;
  line-height: 40px;
}
.el-table tr,
.el-table td {
  color: #e5dada;
  font-size: 14px;
  background-color: transparent !important; /* 背景透明 */
  border: 0;
  height: 30px;
  line-height: 40px;
}
.el-table::before {
  height: 0px;
}