vue+element ui表格实现动态表头

1.需求：

（2）绿框中的表头是动态表头，题目的多少是根据后台返回的数组个数来决定的

2.后台返回的数据

{
	"code":"0",
	"data":[
		{
			"classNo":1,
			"grade":2019,
			"id":553,
			"items":[
				{
					"count":0,
					"itemName":"229"
				},
				{
					"count":0,
					"itemName":"230"
				},
				{
					"count":0,
					"itemName":"231"
				},
				{
					"count":0,
					"itemName":"232"
				},
				{
					"count":0,
					"itemName":"233"
				},
				{
					"count":0,
					"itemName":"234"
				},
				{
					"count":0,
					"itemName":"235"
				},
				{
					"count":0,
					"itemName":"236"
				},
				{
					"count":0,
					"itemName":"237"
				},
				{
					"count":0,
					"itemName":"238"
				},
				{
					"count":0,
					"itemName":"239"
				},
				{
					"count":0,
					"itemName":"240"
				}
			],
			"name":"咖啡",
			"studentCount":24,
			"submitCount":0,
			"title":"班主任技能评定"
		},
		{
			"classNo":2,
			"grade":2018,
			"id":554,
			"items":[
				{
					"count":1,
					"itemName":"229"
				},
				{
					"count":0,
					"itemName":"230"
				},
				{
					"count":0,
					"itemName":"231"
				},
				{
					"count":0,
					"itemName":"232"
				},
				{
					"count":1,
					"itemName":"233"
				},
				{
					"count":0,
					"itemName":"234"
				},
				{
					"count":0,
					"itemName":"235"
				},
				{
					"count":0,
					"itemName":"236"
				},
				{
					"count":1,
					"itemName":"237"
				},
				{
					"count":0,
					"itemName":"238"
				},
				{
					"count":0,
					"itemName":"239"
				},
				{
					"count":0,
					"itemName":"240"
				}
			],
			"name":"张三",
			"studentCount":3,
			"submitCount":1,
			"title":"班主任技能评定"
		}
	],
	"msg":"操作成功"
}

3.SurveyStatistics.vue

结构：

        <!-- 正文表格 -->
        <el-table class="table-list" :data="questionStatisticsData" stripe style="width: 100%">
            <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item.label" :property="item.property" :index="item.index" align="center">
                <template slot-scope="scope">
                    <div>
                        <p v-if="scope.column.property != 'items'">{{scope.row[scope.column.property]}}</p>
                         <p v-else>{{scope.row[scope.column.property][scope.column.index].count}}</p>
                    </div>
                    
                </template>
            </el-table-column>

        </el-table>

方法methods：

//获取每道题选项情况
    getQuestionStatistics() {
        let param = {
            id: this.surverId,
            keyWord: this.selectKeyWord
        }
        let url = '/surveySummary/getSurveySummary';
        this.$ajax.post(url,param).then(res => {
            if(res.data.code == 0){
                this.questionStatisticsData = res.data.data;
                // 动态部分的表头
                const tableHead = [];
                let selectStatistics = this.questionStatisticsData[0].items;
                selectStatistics.forEach((item, index) => {
                    //这里是根据数据循环得到的动态的表头
                    tableHead.push({ index: index, property: 'items' ,label: '题' + (index+1)}); // 动态表头
                });
                // 这里是固定的表头
                const anotherTableHead = [
                    {
                        label: '标题',
                        property: 'title'
                    },
                    {
                        label: '考评对象',
                        property: 'name'
                    },
                    {
                        label: '年级',
                        property: 'grade'
                    },
                    {
                        label: '班级',
                        property: 'classNo'
                    },
                    {
                        label: '学生人数',
                        property: 'studentCount'
                    },
                    {
                        label: '提交人数', 
                        property: 'submitCount'
                    },

                ];
                // 合并动态部分的表头
                this.tableHead = [...anotherTableHead, ...tableHead]; // 表头信息
            }else{
                this.$message({
                    message: res.data.msg,
                    type: 'warning'
                })
            }
        })
    }

4.注意

注：scope.column中的数据需要在循环时传递，否则取不到值！！！

例如：scope.column.index   取index
循环时需加：    :index="item.index"   才可取到对应的值
<el-table-column v-for="(item,index) in tableHead" 
    :key="index" 
    :label="item.label" 
    :property="item.property" 
    :index="item.index" 
    align="center"
></el-table-column>