本文介绍了如何通过修改ElementUI的el-table组件样式，实现表格高度最小化，以展示更多数据。作者发现即使使用了官方提供的属性也无法达到理想效果，通过审查元素发现表格存在默认内边距padding。通过设置深度选择器移除th和td的padding，可以将表格高度降至最低。若感觉过矮，可进一步调整其他属性。示例代码展示了具体实现方式。
问题描述
elementui提供的el-table其实挺不错，不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性，方便我们去修改对应的样式，但是有的时候可能会少了点什么。
比如：想要把表格的高度都尽可能设置小点，这样的话，页面就可以展示更多行更多条数据了。但是单单使用下图中的表格的属性，发现没法让表格的高度设置最小
解决方案
打开F12审查元素，会发现el-table默认带有内边距padding。把这个padding置为0就可以使其变成最矮的高度了。去掉padding就会发现表格的高度就是表格中文字内容撑开的高度。这个的确是最矮的了，如果觉得过于矮了，可以通过上图中的一些属性再去设置高点。
原始图(审查元素)
上图中只审查了表头th，至于表格行td大家自己也可以审查看看
去除padding效果图
最矮的图
是不是很矮，哈哈。觉得矮可以再设置高一点
代码附上
:data="tableData"
border
style="width: 100%"
>
export default {
name: "app",
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
};
看css部分
#app {
width: 100%;
height: 100%;
.el-table {
// 看这里！！！！！！！！！！！！！！！！！！！！！！！！！！！！
// 深度选择器，去除默认的padding
/deep/ th {
padding: 0 ;
}
/deep/ td {
padding: 0 ;
}
}
}
总结
先设置高度为最低，觉得低过头了，再调高一点
扫一扫
2118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
