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

效果如下图所示：

注：写的比较简单，如果大家有好的建议可以直接给我留言！

转载于:https://juejin.im/post/5c34405e51882523730a3714