重置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>