2020-06-11:模板渲染、el-table 上使用无限滚动加载(用来解决前端渲染速度慢)

1、模板渲染

1、<span>{{ true || '----' }}</span>           true
2、<span>{{ false || '----' }}</span>          ----
3、<span>{{ false && '----' }}</span>          false
4、<span>{{ true && '----' }}</span>           ----

2、el-table 上使用无限滚动加载(用来解决前端渲染速度慢)

第一步:element-ui 的 el-table 上使用无限滚动加载(与自带的 infinite-scroll 结合)
第二步:若接口获取的数据只有数组数据,可自己进行处理实行滚动加载效果。

1、获取数据的接口:
          ...
          this.tableLists = res.result
          this.tableList = this.tableLists.slice(0, 10)
          this.allI = res.result.length
          ...
2、声明全局变量:
          ...
          i: 0,
          allI: 0,
          tableList: [],
          tableLists: []
          ...
3、load方法中:
          load() {
              if (this.i < Math.ceil(this.allI / 10)) {
                  this.i++
                  this.tableList = this.tableList.concat(this.tableLists.slice(10 * this.i, 10 * this.i + 10))
              }
        },

至此,实现滚动加载渲染(一次十条数据)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。