ant design vue的table行高调整

  • Post author:
  • Post category:vue


在运用ant design vue的table表格时,觉得行高间距有点大,通过检查发现是padding撑起来了,但是研究一段时间发现使用customRow属性的回调函数改变padding没有效果。

然后就可以选择最简单粗暴的直接修改对应的样式,通过检查找到行高样式的css,直接来个/deep/修改,成功了改变了padding压缩了行高。

//直接在style中添加样式
//这样使用会使得当前页面所有的table表格行样式都会改变
//如果想要调整表头的行高,可以把下面的td改成th
//调整body行属性
/deep/ .ant-table-tbody > tr > td {
  padding: 0px;
}
//调整head行属性
/deep/ .ant-table-thead > tr > th {
  padding: 0px;
}

如果想要对不同table表格使用不同的样式,则可以给表格添加一个class,然后在样式路径前添加class名即可

//下面的className为你在table中添加的class类名
.className .ant-table-tbody > tr > td{
  padding: 0px;
}

用这种方式基本可以设置所有table行属性



版权声明:本文为lee_amazing原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。