Element-ui table 异步加载特定列的处理方案

异步加载

典型应用：先展示所有文章信息，每一行增加一个镜像字段，如: _async_label ，请求成功后更新该字段内容，失败则更新为特定字符，如 '-' 。

核心代码

1 <el-table-column label="标签"
2                 min-width="100"
3                 align="center">
4 <template slot-scope="scope">
5     <span>{{ scope.row._async_label }}</span>
6 </template>
7 </el-table-column>

 1 methods: {
 2   getList() {
 3     this.listLoading = true
 4     this.fetchData(this.listQuery)
 5     .then(response => {
 6       let tablist = response.data.items
 7       let total = response.data.total
 8       // 异步显示文章标签
 9       tablist.forEach(item => {
10         item._async_label = ''
11       })
12       this.list = tablist
13       this.total = total
14       this.getLabel()
15       // 这里 loading 结束，页面上可以看到表格了
16       this.listLoading = false
17     })
18     .catch(err => {
19       this.$notify.warning({
20         message: err || '未获取到相关信息，请刷新页面或稍候再试',
21         duration: 3 * 1000,
22       })
23       this.listLoading = false
24     })
25   },
26   // 获取 文章标签
27   getLabel(){
28     this.list.forEach(item => {
29       getArticleLabelApi(item.articleId)
30       .then(resp => {
31         item._async_label = resp.data.val
32       })
33       .catch(()=>{
34         item._async_label = '-'
35       })
36     })
37   },
38 }