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>
复制代码

效果以下图所示：

注：写的比较简单，若是你们有好的建议能够直接给我留言！