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 = '-'
      })
    })
  },
}