示例:
<Table class="my-table"></Table>
打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值,而且在父元素变小的时候这个值并没有相应地变小,所以才会导致的iView Table组件只会变大不会变小。那么我们就可以根据这个原因才决定解决方案
1、给Table组件的table标签设置一个important的width
.my-table table {
width: 100% !important;
}
这个方法并不是特别好,因为他可能会出现table慢慢变小(而不是瞬间变小)的情况,所以看起来并不是特别好。
2、给Table组件一个确定的计算值
.my-table {
width: calc(100% - 100px);
}
这个方法在目前我已知的方法里是最优的。
3、不要给Table组件的columns参数中添加width属性(未验证)
columns: [{
title: '标题',
width: 200 // 不加这东西
}]
这个方法是网友给的,我没验证不知道有没有用。