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

异步加载

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

核心代码

<el-table-column label="标签"
                min-width="100"
                align="center">
<template slot-scope="scope">
    <span>{{ scope.row._async_label }}</span>
</template>
</el-table-column>

methods: {
  getList() {
    this.listLoading = true
    this.fetchData(this.listQuery)
    .then(response => {
      let tablist = response.data.items
      let total = response.data.total
      // 异步显示文章标签
      tablist.forEach(item => {
        item._async_label = ''
      })
      this.list = tablist
      this.total = total
      this.getLabel()
      // 这里 loading 结束，页面上可以看到表格了
      this.listLoading = false
    })
    .catch(err => {
      this.$notify.warning({
        message: err || '未获取到相关信息，请刷新页面或稍候再试',
        duration: 3 * 1000,
      })
      this.listLoading = false
    })
  },
  // 获取 文章标签
  getLabel(){
    this.list.forEach(item => {
      getArticleLabelApi(item.articleId)
      .then(resp => {
        item._async_label = resp.data.val
      })
      .catch(()=>{
        item._async_label = '-'
      })
    })
  },
}