【element ui】table的使用：table自适应高度 && 选中多行数据，table再次渲染时回显多选的数据

看门见山，直接上代码和截图！

table 自适应高度

• 效果图

1. 初始化页面布局
   

2. 全屏表格，1.中页面的基础上，点击向上 button
   

3. 2.中页面的基础上，点击向下button, 隐藏表格
   

• 实现

table表格自适应高度，主要利用table的 height属性 ；

-template： 双向绑定table的height属性

• data: 设置表格的初始高度
  

• 通过button 的点击事件，改变table父元素的高度从而表格的height随之变化
  
  
  

选中多行数据

应用场景

1. 选中数据后，分页操作，再返回选中数据所在页，可查看分页操作前后，选中数据不变，依然存在；
2. 表格数据，定时动态刷新，选中的数据依然存在；

效果图

• 选中表格中第1页中数据
  

• 显示第2页数据，点击2，显示第2页数据
  

• 再次显示第1页数据
  

实现

1. 利用 table的 row-key属性 和 reserve-selection属性 ，参考element UI

2. 代码如下
   

OK, table表格高度自适应以及table 数据动态更新时 多选数据回显功能 结束，欢迎批评指正，多多交流！