vue+java 实现动态多列表头

实现效果：

页面实现的功能：

根据效果图可以看出此页面实现的功能，数据来源是后勤的满意度调查报表，表头是满意度报表的所有问题；后台返回的表头数据中，包含一个“quesType”属性，此属性的值为5、8、9时，单元格为一个“查看详情”按钮，在点击按钮时，展示对应问题所有建议的拼接。整个页面是一个汇总功能，汇总所有用户的选择结果，按照基地分行展示

组件介绍：

前端vue + 后端java
表头是调用后台java方法动态生成的，很灵活，表中的数据也是后台根据数据库中的数据生成
前端表格所用的组件：el-table，所有的用法都参考自——https://element.eleme.cn/#/zh-CN/component/table

页面元素：

页面主要包含三个技术点，1.动态表头的展示，2.数据与每行每列的绑定，3.页面还包含按钮的点击事件

动态表头

<!--    整个表格定义，绑定数据为tableData-->
    <el-table
      id="table"
      :data="tableData"
      :border="true"
      style="width: 100%">
<!--      表头定义，quesType不为 5 9 8 的，正常显示，表头数据为tableColumn-->
<!--      表头嵌套，目前的需求是最多三层，所以嵌套三层就足够-->
      <el-table-column
        v-for="(item, index) in tableColumn"
        v-if="item.quesType != '5' && item.quesType != '9' && item.quesType != '8'"
        :label="item.name"
        :key="item.prop"
        align="center"
        :prop="item.prop"
      >
        <el-table-column
          v-for="(sonItem, index) in item.children?item.children:[]"
          :label="sonItem.name"
          :key="sonItem.prop"
          align="center"
          :prop="sonItem.prop"
        >
          <el-table-column
            v-for="(sonItem2, index) in sonItem.children?sonItem.children:[]"
            :label="sonItem2.name"
            :key="sonItem2.prop"
            align="center"
            :prop="sonItem2.prop"
          >
          </el-table-column>
        </el-table-column>
      </el-table-column>
<!--      如果quesType为5 9 8，那么单元格设置为按钮（目前需求，只要类型为589，那表头就是非嵌套的，所以这样写就能满足需求）-->
      <el-table-column
        v-for="(item, index) in tableColumn"
        v-if="item.quesType == '5' || item.quesType == '9' || item.quesType == '8'"
        :label="item.name"
        :key="item.prop"
        align="center"
        :prop="item.prop"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row,scope.column)">查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
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

tableColumn即表头的数据结构

tableColumn是表头的详细数据，从后台获取，主要的数据结构是List

tableColumn中的每个map元素都包含 “prop”、“name”、“quesType”属性，如果有二级表头，则含有“childern”属性；chidren属性与tableColumn的数据结构基本一致，是List

其中，prop属性至关重要，他是设置数据时定位列的标识，可以理解为列坐标，我这里取的是二级标题（如果有三级标题那么取三级标题）在后台数据库中的id，这表明这个属性唯一且不重复；name属性是表头展示的信息，quesType属性上文已经提过，只是本次的需求决定他的存在，如果没有这种需求，那么这个属性也不是必要的。

tableData即报表内容的数据结构

tableData是报表内的数据，从后台获取，数据结构是List

从后台获取对应的格式的数据，然后赋给前端，这个功能就实现了。