项目中遇到的一个坑吧,我们在完成UI给的效果图的时候,总会需要修改el-table的样式
<div class="tableDate">
<el-table
:data="InvoiceFileData"
style="width: 100%;">
<el-table-column
label="文件名称"
prop="UploadFileName">
<el-link type="primary" style="font-size: 14px;color: #478fc6;">
{{UploadFileName}}
</el-link>
</el-table-column>
<el-table-column
prop="UploadTime"
label="上传时间">
</el-table-column>
<el-table-column
label="操作">
<div class="Download" style="font-size: 14px;color: #478fc6;">下载</div>
</el-table-column>
<template slot="empty">
<div>暂无附件</div>
</template>
</el-table>
</div>
因为elementUI是全局作用的,所以需要将style中的scoped给去掉。但是这样就会发生全局样式污染,导致整个项目所有的el-table的样式都被修改了
我们需要在table外加一个添加父样式tableDate,防止全局样式污染
.tableDate .el-table td {
height: 42px;
padding: 0;
}