首先先解释一下两种不显示元素的基础知识，然后在给出一个例子及其实现的代码。先展示一下例子想要的效果。
如下图，这个表格最后两列正常情况下是没有显示的。
当鼠标移动该行时，该行的最后两列显示出来，如下图红框内显示。
接下来介绍两种使得元素不显示的方法。
CSS中visibility: hidden和display: none 均可以让我们看不到元素，但是有所不同。
- 作用不同
visibility: hidden——将元素隐藏，但是在网页中度该占的位置还是占着。
display: none——将元素的显示设为无，即在网页中不占任何的位置。 - 使用后HTML元素有所不同
visibility:hidden，使问用该属性后，HTML元素（对象）仅仅是在视答觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
display:none，使用该属性后，HTML元素（对象）的宽度、高度等各回种属性值都将“丢失”。
区别如图红框所示
最后要实现一开始那个例子，先实现隐藏效果。
<td class="operations"><aclass="td-hidden"@click="onCreateActivity(item)">创建活动</a>
</td>
<td class="flight-detail"><aclass="td-hidden"@click="openFlightDetail(item.flightNoId)"><i class="fa fa-file-text"/></a>
</td>
.td-hidden {visibility: hidden;
}
即可隐藏，然后当鼠标移动至该行显示时需要补充一个知识。CSS:hover选择器 :hover 选择器用于选择鼠标指针浮动在上面的元素。详情见链接
所以代码如下，鼠标指针浮动在tr行时，使用tr控制其内部的td-hidden。
tr:hover .td-hidden {visibility: visible;
}
