ant design vue的table行高调整

在运用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行属性

  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值