elementui中el |
您所在的位置:网站首页 › el-table-column高度 › elementui中el |
问题描述
elementui提供的el-table其实挺不错,不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性,方便我们去修改对应的样式,但是有的时候可能会少了点什么。
比如:想要把表格的高度都尽可能设置小点,这样的话,页面就可以展示更多行更多条数据了。但是单单使用下图中的表格的属性,发现没法让表格的高度设置最小
打开F12审查元素,会发现el-table默认带有内边距padding。把这个padding置为0就可以使其变成最矮的高度了。去掉padding就会发现表格的高度就是表格中文字内容撑开的高度。这个的确是最矮的了,如果觉得过于矮了,可以通过上图中的一些属性再去设置高点。 原始图(审查元素)上图中只审查了表头th,至于表格行td大家自己也可以审查看看 去除padding效果图最矮的图
是不是很矮,哈哈。觉得矮可以再设置高一点 代码附上 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 ; } } } 复制代码 总结先设置高度为最低,觉得低过头了,再调高一点 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |