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))
}
},
至此,实现滚动加载渲染(一次十条数据)。