1.通過axios獲取後臺資料。

submitForm () { return axios({ method: 'get', url: 'http://連結', withCredentials: true }) .then((response) => { return response.data }) .catch((error) => { console.log(error) }) }

2.vux的panel屬性可以在html中只寫一行，具體數值從js中獲取資料，並通過多組資料自動渲染出多行列表。

<panel header="標題" :list="list" :type="type"></panel>

3.而在demo中，script返回的資料中，具體資料仍然需要自己填充而不是後臺資料獲取，仍然是寫死的。如下。

data () {
    return {
      type: '1',
      list: [{
        src: 'http://somedomain.somdomain/x.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title
 
: '標題一',
        desc: '由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的執行軌道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '標題二',
        desc: '由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的執行軌道。',
        url: {
          path: '/component/radio',
          replace
 
: false
        },
        meta: {
          source: '來源資訊',
          date: '時間',
          other: '其他資訊'
        }
      }],
      footer: {
        title: this.$t('more'),
        url: 'http://vux.li'
      }
    }

為了能靈活使用獲取的後臺資料，陣列list不能寫死。因此list應該內部為空，並不必須填入屬性以及數值等內容，這些都利用方法將後臺資料填充進去。

data () { return { type: '3', list: [] }

method中，具體如下：

submit () { back.submitForm().then((response) => { let sets = [] if (response.data !== undefined) { console.log(response) for (let i = 0; i < response.data.length; i++) { let groupinfo = {} groupinfo.title = response.data[i].name            groupinfo.id = response.data[i].idsets[i] = groupinfo } } this.list = sets }) }

而如果你的陣列list中還需要填入一個數組時，應當裡面再巢狀一個迴圈：

submit () { back.submitForm().then((response) => { let sets = [] if (response.data !== undefined) { console.log(response) for (let i = 0; i < response.data.length; i++) { let groupinfo = {} let ingroup = [] if (response.data[i].powerSockets !== undefined) { for (let j = 0; j < response.data[i].total; j++) { let obj = {} obj.used = response.data[i].powerSockets[j].used obj.id = response.data[i].powerSockets[j].id ingroup[j] = obj } } groupinfo.title = response.data[i].name groupinfo.items = ingroup sets[i] = groupinfo } } this.list = sets }) }

這樣，就可以將後臺資料收到的json資料填靈活的充進list之中，再利用panel渲染出多行資料。

ps:接下來我需求在上方渲染的列表中，點選不同的列表彈出的子元件彈窗中包含後臺資料獲取的相對應的內容（如何彈出子元件彈窗，點選這裡）。

方法與上方大致相同，需要舉一反三。在panel中加入@on-click-item屬性，以此獲取點選的列表時第幾個，並且其中showModule預設有引數，引數為之前list陣列中獲取的json資料。

<panel header="常用電站列表" :list="list" :type="type" @on-click-item="showModule"></panel>

然後再根據上方內容新建一個數組，利用showModule將引數填充進陣列中。

接下來的彈窗可以呼叫新建陣列內部的內容，具體程式碼不貼出來，與上方相似。

彈窗內容填充僅寫出思路，希望下次有相似的需求時能根據思路順暢的寫出來。

總結：舉一反三。