el-tableの元のスタイルを変更する場合は、element-uiを使用します
1.グローバルスタイルに影響を与えないように、クラスをカスタマイズできます
<div class="liquidataCase border-padding bg-shadow">
<el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight">
......
</el-table>
</div>
CSSスタイルのスコープなし
<style lang="scss">
$wxcolor:#e4c21b;
.wxcolor{color:$wxcolor};
.liquidataCase .el-table tr td:nth-child(3) .cell{
text-align: center;
i{
&:hover{
cursor: pointer;
}
}
}
.liquidataCase .el-select__tags{
flex-wrap: initial !important;
}
</style>
2.スコープをcssスタイルに追加する場合、/ deep /を使用すると有効になります
<style lang="scss" scoped>
$wxcolor:#e4c21b;
.wxcolor{color:$wxcolor};
/deep/.liquidataCase .el-table tr td:nth-child(3) .cell{
text-align: center;
i{
&:hover{
cursor: pointer;
}
}
}
/deep/.liquidataCase .el-select__tags{
flex-wrap: initial !important;
}
</style>
コンポーネントは影響しません