效果圖:

說明:運營成本支出下面存在不確定個子項

數據格式:

裏面還嵌套json數組對象

思路:1把json數組對象要顯示的數組添加到原數組(8: 2000 => id: value)，通過:prop="item.id" item.id是json數組對象的id,因為原數組已經添加了id這個屬性，能夠對應顯示數據

代碼:

api.getRealCost(param).then(r => {
          this.loading = false
          this.tableData = r.data.data
          r.data.data.forEach((item) => {
            item.costDetails.forEach((index) => {
              this.detailist.push(index)//把json數組對象的每一項push到新數組，再去重得到唯一的子項目
              index._id = index.dictId.toString()//不添加這個屬性會有個bug
              item[index.dictId] = index.amount//往數據創建新的屬性amount是要顯示在界面上的
            })
          })
          // 去重得到唯一的list
          for (var i = 0; i < this.detailist.length; i++) {
            for (var j = i + 1; j < this.detailist.length; j++) {
              if (this.detailist[i].dictId === this.detailist[j].dictId) {
                this.detailist.splice(j, 1)
                j = j - 1
              }
            }
          }

　頁面引用:

:prop=""顯示數據，：label顯示標題

elementUI table數據顯示效果(二)