javascript

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

目录
  1. 1. 1.需求：
  2. 2. 2.后台返回的数据
  3. 3. 3.SurveyStatistics.vue
  4. 4. 4.注意

1.需求：

（1）红框中的表头是固定表头

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

2.后台返回的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
{
	"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"
				}
			],
			"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"
				}
			],
			"name":"张三",
			"studentCount":3,
			"submitCount":1,
			"title":"班主任技能评定"
		}
	],
	"msg":"操作成功"
}

3.SurveyStatistics.vue

结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 正文表格 -->
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//获取每道题选项情况
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中的数据需要在循环时传递，否则取不到值！！！

1
2
3
4
5
6
7
8
9
例如：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>