鍍金池/ 問(wèn)答/HTML/ vue組件庫(kù)element-ui 的Table內(nèi)容顯示不更新

vue組件庫(kù)element-ui 的Table內(nèi)容顯示不更新

<el-table border :data="filelist">
  <el-table-column label="ID" width="90px" prop="fid"></el-table-column>
  <el-table-column label="所屬項(xiàng)目" prop="project"></el-table-column>
</el-table>
    loadFilelsit() {
      this.$request.get('/resource/myfilelist', {
        params: {
          '_catalog': 'relatednop', '_direction': 'DESC', '_num': this.numperpage, '_page':1
        }
      }).then((m) => {
        this.filelist = JSON.parse(JSON.stringify(m.data.items))
        this.totalnum = m.data.total
        let filenum = this.filelist.length
        for(var idx = 0; idx < filenum; idx++) {
          this.filelist[idx].project = '未分配項(xiàng)目'
          this.updateSingleFileinfo(idx)
        }
      }).catch((err) => {

      })
    },

    updateSingleFileinfo(idx) {
      this.$request.get('/resource/file/'+this.filelist[idx].fid, {
        params: {
          '_expand': 1
        }
      }).then((m) => {
        // 項(xiàng)目名
        if(m.data.project_info) {
          this.filelist[idx].project = m.data.project_info.name
        }
        else {
          this.filelist[idx].project = '未分配項(xiàng)目'
        }
        // 文件名
        // this.filelist[idx]['filename'] = m.data['filename']
        this.filelist[idx]['filename'] = m.data.filename

      }).catch((err) =>{
      })

filelist是data中定義的一個(gè)數(shù)組,數(shù)組中的內(nèi)容經(jīng)過(guò)兩次http請(qǐng)求獲取完整。第一次http請(qǐng)求獲取到filelist中文件列表每個(gè)成員的ID,第二次獲取到filelist中每一項(xiàng)的詳細(xì)信息,并更新到filelist數(shù)組的成員上去。

但是第二次Http請(qǐng)求后更新了數(shù)組信息后,表格上顯示的“所屬項(xiàng)目”始終無(wú)法更新,而在調(diào)試下看到filelist數(shù)組的內(nèi)容又的確是已經(jīng)變化了的。

這個(gè)雙向數(shù)據(jù)綁定是假的吧。

回答
編輯回答
離殤

其實(shí)table組件由row-key屬性,指定對(duì)應(yīng)的值之后,就可以了

2018年5月11日 10:30
編輯回答
咕嚕嚕
//這樣寫(xiě)
this.$set(this.filelist,this.filelist[idx].project,m.data.project_info.name)

ps: 請(qǐng)看 vue 數(shù)組
2017年12月26日 17:52