VUE中Table隐藏列

vue表格隐藏列使用i-view的Table组件隐藏列实现第一步:设置需要隐藏的列的宽度为0第二步:设置内容超出长度时隐藏第三步:删除标题

vue表格隐藏列

应用场景: 表格中的序号列为数据的联合主键,显示在表格中影响界面美观,但是在数据的修改和删除时又必须要使用到,所以希望这几列隐藏不展示.

使用i-view的Table组件

项目中使用vue框架,表格组件为i-view的Table组件 i-view使用方式及官网API:https://www.iviewui.com/docs/introduce

隐藏列实现

第一步:设置需要隐藏的列的宽度为0

效果如下:列宽为0时,列的内容并不会隐藏

第二步:设置内容超出长度时隐藏

效果如下:内容已经隐藏了,但是表头的列高度显示异常 原因: 表头的内容并不受ellipsis: true, tooltip: true 的影响

第三步:删除标题

列隐藏效果实现(由于列需要隐藏,所以表头标题有没有都没有影响,直接删除)