覆盖AntDesignVue中Table表格的固定⾼度和宽度
Ant Design Vue_Table表格的固定⾼度和宽度
需求在这⼀⼩块div中做⼀个Table，如果⽤Ant Design Vue中的a-table，默认的⾼度和宽度会撑开这么⼩得div范围，在官⽅的Api⽂档中也没有到有关的参数本⽂就是解释如何使⽤Ant Design Vue中的a-table完成⼤⼩改变
代码展⽰
加⼊这样写的话,Div必定会被撑开,table也会伸展到下⾯的模块
由于项⽬后台崩了，页⾯打不开，我就不做错误展⽰了
<div class="countySort">
<div class="countySortFontColor">全区排名</div>
<div class="testBox2" >
<a-table
antdesignvuetable动态表头:columns="columns"
:data-source="CountySortData"
:pagination="false"
>
</a-table>
</div>
</div>
重写或者覆盖原本的a-table的样式
/deep/的作⽤我听前端同事说是可以实现覆盖和重写的效果，再加上 !important；来提⾼优先级
以及我们样式中的和a-table标签中的源码样式取名是⼀样的，这样就能实现覆盖原本的样式
简单总结来说，当你想修改⼀个被封装好的组件样式时，利⽤重名，优先级覆盖样式的特性来实现
四要素:
/deep/ 关键字可以实现覆盖和重写
取⼀个想要被覆盖掉的样式名
样式内属性重写
加上关键字!important来提⾼优先级(可以先不加看看)
// 给.ant-table设置最低⾼度
/deep/.ant-empty-normal {
margin: 1.9% 0 !important;
}
// 当表格数据为空时，修改.ant-empty-normal样式，会撑⾼空⽩样式
/deep/.ant-table {
min-height: 1.9% !important;
}
/deep/ tr{
height: 1px !important;
line-height: 1px !important;
padding: 0px !important;
}
/deep/ td{
height: 1px !important;
line-height: 1px !important;
padding: 0px !important;
}
/deep/ th{
height: 1px !important;
line-height: 1px !important;
padding: 0px !important;
}
/deep/ .ant-table-tbody{
padding: 0px !important;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。