[ ["填报单位", "类型", "2022年秋季学期全日制学历教育在校生人数(高职学校取教育事业统计人数;中职学校取注册学籍数)", null, "全校教职工人数", null, null, null, "2022年部门决算", null, null, null, null, null, null, null, null, "固定资产\r\n(截至2022年12月31日)", null, null, null, null, null, "2022秋-2023春学年\r\n本专业大类学时数", null, null, "备注"], [null, null, "小计", "其中:\r\n本专业大类人数", "小计", "其中:", null, null, "人员支出", "公用支出", null, "项目支出", null, "学生资助", null, null, null, "教学科研仪器设备值", "本专业大类相关固定资产", null, null, null, null, "小计", "基础公共课总学时", "专业实验实训课总学时", null], [null, null, null, null, null, "专任教师", "外聘及兼职教师", "行政、教辅及工勤人员", null, "小计", "其中:用于本专业大类公用支出(含实习实训耗材支出)", "小计", "其中:用于本专业大类的经常性支出(含实习实训耗材支出,不含固定资产购置)", "小计", "财政部门拨付的学生资助资金", "事业收入", "事业收入中计提的资助经费", null, "小计", "专用教学实验实训仪器设备原值", "其他通用教学实验实训仪器设备原值", "行政后勤保障公共基础设施设备原值", "房屋建筑物入账值\r\n(不含保障性住房)", null, null, null, null] ]用这个数组循环组装成一个el-table表格的表头
时间: 2023-12-11 10:05:42 浏览: 48
可以使用以下代码将数组循环组装成一个el-table表格的表头:
```html
<el-table :data="tableData" border>
<el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="'col' + index" :label="item[0]">
<template slot-scope="scope">
<span v-if="item[1] === null">{{ scope.row['col' + index] }}</span>
<span v-else>{{ item[1] }}</span>
</template>
</el-table-column>
</el-table>
```
其中,`tableData`为表格数据,`tableHeader`为表头数组。在循环表头数组时,使用`:prop="'col' + index"`绑定每一列的数据项,`:label="item[0]"`绑定每一列的表头名称。在表格的`<template>`中,使用`scope.row['col' + index]`获取每一列的数据,使用`v-if`判断表头的第二项是否为`null`,如果是,则直接显示数据,否则显示表头的第二项。
相关问题
[ ["填报单位", "类型", "2022年秋季学期全日制学历教育在校生人数(高职学校取教育事业统计人数;中职学校取注册学籍数)", null, "全校教职工人数", null, null, null, "2022年部门决算", null, null, null, null, null, null, null, null, "固定资产\r\n(截至2022年12月31日)", null, null, null, null, null, "2022秋-2023春学年\r\n本专业大类学时数", null, null, "备注"], [null, null, "小计", "其中:\r\n本专业大类人数", "小计", "其中:", null, null, "人员支出", "公用支出", null, "项目支出", null, "学生资助", null, null, null, "教学科研仪器设备值", "本专业大类相关固定资产", null, null, null, null, "小计", "基础公共课总学时", "专业实验实训课总学时", null], [null, null, null, null, null, "专任教师", "外聘及兼职教师", "行政、教辅及工勤人员", null, "小计", "其中:用于本专业大类公用支出(含实习实训耗材支出)", "小计", "其中:用于本专业大类的经常性支出(含实习实训耗材支出,不含固定资产购置)", "小计", "财政部门拨付的学生资助资金", "事业收入", "事业收入中计提的资助经费", null, "小计", "专用教学实验实训仪器设备原值", "其他通用教学实验实训仪器设备原值", "行政后勤保障公共基础设施设备原值", "房屋建筑物入账值\r\n(不含保障性住房)", null, null, null, null] ]用这个数组组装成一个el-table表格的表头
以下是使用该数组组装成的el-table表格的表头:
```
<el-table :data="tableData">
<el-table-column prop="填报单位" label="填报单位"></el-table-column>
<el-table-column prop="类型" label="类型"></el-table-column>
<el-table-column prop="2022年秋季学期全日制学历教育在校生人数(高职学校取教育事业统计人数;中职学校取注册学籍数)" label="2022年秋季学期全日制学历教育在校生人数(高职学校取教育事业统计人数;中职学校取注册学籍数)">
<el-table-column prop="小计"></el-table-column>
<el-table-column prop="其中:本专业大类人数"></el-table-column>
</el-table-column>
<el-table-column prop="全校教职工人数" label="全校教职工人数">
<el-table-column prop="专任教师"></el-table-column>
<el-table-column prop="外聘及兼职教师"></el-table-column>
<el-table-column prop="行政、教辅及工勤人员"></el-table-column>
<el-table-column prop="小计"></el-table-column>
</el-table-column>
<el-table-column prop="2022年部门决算" label="2022年部门决算">
<el-table-column prop="人员支出"></el-table-column>
<el-table-column prop="公用支出">
<el-table-column prop="其中:用于本专业大类公用支出(含实习实训耗材支出)"></el-table-column>
<el-table-column prop="小计"></el-table-column>
</el-table-column>
<el-table-column prop="项目支出"></el-table-column>
<el-table-column prop="学生资助">
<el-table-column prop="财政部门拨付的学生资助资金"></el-table-column>
<el-table-column prop="事业收入">
<el-table-column prop="事业收入中计提的资助经费"></el-table-column>
<el-table-column prop="小计"></el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column prop="固定资产(截至2022年12月31日)" label="固定资产(截至2022年12月31日)">
<el-table-column prop="教学科研仪器设备值"></el-table-column>
<el-table-column prop="本专业大类相关固定资产"></el-table-column>
</el-table-column>
<el-table-column prop="2022秋-2023春学年本专业大类学时数" label="2022秋-2023春学年本专业大类学时数">
<el-table-column prop="基础公共课总学时"></el-table-column>
<el-table-column prop="专业实验实训课总学时"></el-table-column>
</el-table-column>
<el-table-column prop="备注" label="备注"></el-table-column>
</el-table>
```
阅读全文
相关推荐







