el-table实现展开/收起列表功能

需求功能如下:
序号的头部,显示展开按钮, 点击展开, 列表全部显示, 分页显示, 同时展开按钮 -> 收起 按钮
点击收起, 仅展示列表的第一二条数据

    
      
      
         
      
        
      
      
        
      
    

    
    


//逻辑层
data() {
      return {
     		logList:[],
	        isOpen: false
	}
}
//核心是设置了table内部维护的store的状态, 源码内部调用列过滤的时候, 也是重置了states.data值
 methods: {
      initTable() {
      //初始化调用时, 可以在页面刚刷新完成则显示收起时的状态
        this.$refs.accountTable.store.states.data = this.logList.filter((v, i) => i <= 1);
      },
      changeOpen() {
        if(!this.isOpen) {
         //核心代码
          this.$refs.accountTable.store.states.data = this.logList;
        }else {
          this.initTable()
        }
        this.isOpen = !this.isOpen;
      },
 }