element動態增長表頭

最近遇到一個問題，就是關於如何根據後臺返回的數據，動態增長表頭，關於這個問題，官方文檔也沒找到相關的案例。後面就本身想了個方法，如今拿出來跟你們分享一下~

通常狀況下，表格的數據是後臺返回一個數組，而後經過prop綁定相應的屬性渲染整個頁面，如今有一種狀況是後臺返回一個數組，裏面有一部分表頭的屬性是直接能夠渲染，還有一部分表頭是數組。具體的格式大體以下：

data() {
    return: {
        tabe:[
            {id : '1', name: '222', list:[
                {選擇1: 'a'},
                {選擇6: 'b'},
                {選擇2: 'e'}
            ]},
            {id : '2', name: '555', list:[
                {選擇1: 'a'},
                {選擇2: 'c'}
            ]}
        ]
    }
}
複製代碼

其中list裏面的屬性是不肯定的，可能有5個，可能只有1個。

思路： 對於這種格式的數據渲染表格，咱們能夠將固定的表頭和動態增長的表頭分爲兩部分，而後循環整個表頭。

data() {
    // 固定的表頭
    this.tableHead = [{
        name: '問題內容',
        prop: 'questionName'
      }, {
        name: '類型',
        prop: 'type'
      }, {
        name: '正確選項',
        prop: 'correctAnswer'
      }, {
        name: '正確率',
        prop: 'correctRate'
      }, {
        name: '抽取次數',
        prop: 'etlTime'
      }]
}
複製代碼

主題部分：先要對後臺返回的數據格式進行相關的處理。

this.tableHead = [{
        name: '問題內容',
        prop: 'questionName'
      }, {
        name: '類型',
        prop: 'type'
      }, {
        name: '正確選項',
        prop: 'correctAnswer'
      }, {
        name: '正確率',
        prop: 'correctRate'
      }, {
        name: '抽取次數',
        prop: 'etlTime'
      }]
      const selectArr = []
      this.tableData = []
      res.data.list.forEach((value, index) => {  // res.data.list 是後臺返回的數據，結構跟最上面的是同樣的
        const obj = {}
        selectArr.push(value.choiceNum)
        Object.keys(value).forEach((key) => {
          if (key === 'choiceList') {  // choiceList是list裏面的一個數組
            value[key].forEach((value1, index1) => {
              Object.keys(value1).forEach((key1) => { // 從新組裝choiceList裏面的數據
                obj[`choice${index1 + 1}`] = key1   
                obj[`rate${index1 + 1}`] = value1[key1]
              })
            })
          }
        })
        this.tableData.push(obj)   // 將組裝好的數據放入tableData裏面
      })
      const maxNum = selectArr.sort((a, b) => {   // 對動態增長的表頭進行排序 1-10
        const r = b - a
        return r
      })[0]
      for (let i = 0; i < maxNum; i++) {  
        this.tableHead.push({   //動態增長的表頭屬性值
          name: `選項${i + 1}`,
          prop: `choice${i + 1}`
        }, {
          name: '選擇率',
          prop: `rate${i + 1}`
        })
      }
複製代碼

頁面部分：

<el-table
            :data="tableData"
            border
            highlight-current-row
            :header-cell-style="{textAlign:'center',background:'#F8F8F9',color: '#333'}"
            :cell-style="{textAlign:'center'}"
            style="width: 100%;text-align:center">
            <el-table-column type="index" 
                             width="50" 
                             label="序號">
            </el-table-column>
            <template v-for="(item, index) in tableHead">
            <el-table-column
                :label="item.name"
                :key="index">
                <template slot-scope="scope">
                    {{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}
                </template>
            </el-table-column>
        </template>
        </el-table>
複製代碼

效果以下圖所示：

注：寫的比較簡單，若是你們有好的建議能夠直接給我留言！