iview Table 组件一直有横向滚动条

Question

<!-- 表格 -->

  <Col class="panel table-panel" :span="24">
  <Table style="width: 100%;" :loading="pageInfo.loading" :columns="columns" :data="tableData" border @on-row-click="rowClick"></Table>
  </Col>
  
  columns 中并未设置每一列的宽度，Col的宽度是100%

Answer 1

因为你加了border属性，会默认给每个td加个1px的有边框。当有数据时，iview会把最后一个td加个class设置没有有边框，当没数据时，没有加上这个class,所有有1px的边框多出来导致横向滚动条，算是一个小bug吧，自己加个class强制覆盖它

Answer 2

我研究了好长时间，没有找到合理的方法。最后暴力解决 .ivu-table-overflowX{ overflow-x: hidden;} 把Iview里这个类的样式暴力覆盖，希望能帮助到你

Answer 3

可以用data是否为空控制是否有border 来处理这个问题

     <i-table :columns="columns" :data="data" :border="data.length > 0">
     </i-table>

Answer 4

建议你把表格截图发出来，，你审查一下元素是不是外层那部分的样式问题，另外不要给表格或者某一列固定的宽度先试试

Answer 5

看一下外层元素的宽度给的对么，这种情况应该就是父元素的宽度不够

Answer 6

估计是 columns 里面的 width 的值不是为正整数，像 "100px", "30%"，这些值都不行。
https://github.com/iview/ivie...

Answer 7

eMMM,我没有遇到这类问题

Answer 8

是table标签里面border属性的问题，没数据情况下确实会有滚动条

Answer 9

这个 你要不把滚动条隐藏 要不自己写样式 都可以
.ivu-table-overflowX::-webkit-scrollbar{ display: none ;}
这样隐藏

.ivu-table-overflowX::-webkit-scrollbar{

height:4px;

}
/滚动条里面小方块/
.ivu-table-overflowX::-webkit-scrollbar-thumb{

 border-radius:5px;
 background:rgba(0,0,0,0.2);
}

/滚动条里面轨道/
.ivu-table-overflowX::-webkit-scrollbar-track{

-webkit-box-shadow:rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);

}
这样 写样式 具体的 参数你自己 看着调