欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

重置element-ui 表格样式

程序员文章站 2022-06-07 18:42:13
...

有时候需要用element-ui的表格,但又要改变样式,所以就需要重置el-table样式。
我项目是用less写的,这个是css重置的样式

  .alarm-config /deep/ .el-table{
        background-color: #111C29;
        td,th{            
            border: 1px solid rgba(96, 101, 105, 0.5);
        }
         thead {
            tr, td,th  {
            padding: 0;
            height: 60px;
            background-color: #1C2733;
            .cell {
                background: #1C2733;
                min-height: 30px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: auto;
                white-space: nowrap;
                border-right: unset;
                 }
            }
        }
        tbody {     
            .cell {
            padding: 0;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            }

            td, tr {
            height: unset;
            padding: 0;
            background:#111C29;
            }
        }
        }

模板样式,用的是vue框架

 <el-table
             ref="multipleTable"
             :data="alarmData"
             tooltip-effect="dark"
             style="width: 100%"
             @selection-change="handleSelectionChange">

             <el-table-column
             label="监测报警名称"
             prop="alarmName"
             >
             </el-table-column>

             <el-table-column
             width="500">
              <template slot="header" slot-scope="scope">
                 <el-checkbox v-model="voiceAlarmCheck" @change="allAlarmCheck('voice')">语音提示</el-checkbox>
             </template>
             
             <template slot-scope="scope">
                 <el-checkbox v-model="scope.row.checked" ></el-checkbox>
                 <span class="lab">提示次数:</span><el-input-number v-model="scope.row.date" controls-position="right"></el-input-number>
                 <span class="lab">每次间隔(s):</span><el-input-number v-model="scope.row.voice" controls-position="right"></el-input-number>                       
             </template>                
             </el-table-column>

             <el-table-column
             >
              <template slot="header" slot-scope="scope">
                 <el-checkbox v-model="dialogAlarmCheck" @change="allAlarmCheck('dialog')">弹窗提示</el-checkbox>
             </template>
             <template slot-scope="scope">
                 <el-checkbox v-model="scope.row.checked1" >弹窗提示</el-checkbox>
             </template>
             </el-table-column>
       </el-table>
相关标签: 实操