Vue + Element UI table implements dynamic table headers

1. Requirements:

(2) the header in the green box is the dynamic header, and the number of topics is determined by the number of arrays returned in the background

2. Data returned in the background

{
	"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":"Coffee"."studentCount": 24,"submitCount": 0."title":"Assessment of Class Teacher skills"
		},
		{
			"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":"Zhang"."studentCount": 3."submitCount": 1,"title":"Assessment of Class Teacher skills"}]."msg":"Operation successful"
}
Copy the code

3.SurveyStatistics.vue

Structure:

<! -- text table --> <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>
Copy the code

Method the methods:

// Get the options for each questiongetQuestionStatistics() {
        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; // Dynamic part of the table header const tableHead = [];letselectStatistics = this.questionStatisticsData[0].items; Selectstatistics.foreach ((item, index) => {// here is a dynamic tablehead.push ({index: index, property:'items' ,label: 'questions'+ (index+1)}); }); Const anotherTableHead = [{label:'title',
                        property: 'title'
                    },
                    {
                        label: 'Evaluation Object',
                        property: 'name'
                    },
                    {
                        label: 'grade',
                        property: 'grade'
                    },
                    {
                        label: 'class',
                        property: 'classNo'
                    },
                    {
                        label: 'Student numbers',
                        property: 'studentCount'
                    },
                    {
                        label: 'Number of submitters', 
                        property: 'submitCount'},]; This.tablehead = [...anotherTableHead,...tableHead]; this.tablehead = [...anotherTableHead,...tableHead]; // table header}else{
                this.$message({
                    message: res.data.msg,
                    type: 'warning'})}})}Copy the code

4. Pay attention to

Note: the data in scope.column needs to be passed through the loop, otherwise it will not get a value!!

For example: scope.column.index: :index= is added to the index loop"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>
Copy the code