今天正好在封装element-ui的表格组件,对比了下layui的样式,发现element的padding过大和line-height过小。
作用的样式对应如下:
.el-table td, .el-table th{padding:12px 0}
.el-table .cell{line-height: 23px}
按照以往的做法,是在vue里新建一个style,不设置scoped。并在table上指定一个新的class,例如mytable
<el-table class="myclass" ......>
然后使用样式覆盖
<style scoped lang="scss">
.mytable td, .mytable th{padding:12px 0 !important;}
</style>
想想这种方法还是有局限的,1是必须要自建新的class,2是important由于强制了顺序,需要慎用。
因此尝试了另外一种更优雅的方法。即使用scoped的方式。先看看直接使用scoped有什么问题吧:
scoped的原理是给对应的节点生成data-v-xxxx的属性,然后选择器里使用例如el-table[data-v-xxxx]来实现局部样式覆盖。直接写需要的样式如下
.el-table td, .el-table th{
padding: 9px 0;
}
.el-table td, .el-table th{
padding: 9px 0;
}
.el-table .cell{
line-height: 21px;
}
结果没生效,一看生成的CSS,原来是这样的
@charset "UTF-8";
.el-table td[data-v-b8be5364], .el-table th[data-v-b8be5364] {
padding: 9px 0;
}
.el-table td[data-v-b8be5364], .el-table th[data-v-b8be5364] {
padding: 9px 0;
}
.el-table .cell[data-v-b8be5364] {
line-height: 21px;
}
难怪没生效,data-v-xxx属性是生成在el-table上的啊!于是尝试了下 >>>的写法,也就是scss的/deep/。写作:
.el-table /deep/ td, .el-table /deep/ th{ /* css是>>> scss是deep */
padding: 9px 0;
}
.el-table /deep/ td, .el-table /deep/ th{
padding: 9px 0;
}
.el-table /deep/ .cell{
line-height: 21px;
}
再看一下界面,都生效了。生成的CSS如下:
@charset "UTF-8";
/* ---------- 常量值 ---------- */
.el-table[data-v-b8be5364] td, .el-table[data-v-b8be5364] th {
/* css是>>> scss是deep */
padding: 9px 0;
}
.el-table[data-v-b8be5364] td, .el-table[data-v-b8be5364] th {
padding: 9px 0;
}
.el-table[data-v-b8be5364] .cell {
line-height: 21px;
}
好了,这下不用定义新样式,也不用important就将局部样式调整了
继续调整其他样式。。。。