element Table组件下拉上拉效果实现

2019-07-23更新

经过一段时间的学习 我发现了更为简单的方法，CSS的 transition属性   指定对应的属性完成需要多久时间。

因此我们定义了一个class

.carton{
  transition: height 5s;
}

设置test的class = carton  并修改函数  showTable   hiddenTable，并删除其他函数

showTable: function () {
      const div1 = document.getElementById('test')
      const div2 = document.getElementById('table')
      div1.style.height = div2.offsetHeight + 'px'
    },

hiddenTable: function () {
      const div1 = document.getElementById('test')
      div1.style.height = '0px'
    },

相对原来的代码 减少了大量js函数，将动画的实现过程交给CSS！

-----------------------------------------------以下是原答案------------------------------------

因为工组需要，在网上找了不少关于table组件下拉上拉效果的文章，可能因为代码太复杂了，太高深了 我个菜鸟看不太懂。所以只好自己想办法实现，幸好，想到了一个办法&#x