前提:以下代码是vue2项目结合elementUi完成的
数据结构
后端传来的数据是两个list,一个表头的list,一个表格内容的list
// 表头
headTableAtts: [
{ columnLabel: '姓名', columnName: 'name' },
{ columnLabel: '年龄', columnName: 'age' },
{ columnLabel: '性别', columnName: 'gender' },
{ columnLabel: '学校', columnName: 'school' },
{ columnLabel: '学历', columnName: 'qualification' },
],
// 表格
dataList: [
{ name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士' },
{ name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' },
{ name: '墨方', age: 18, gender: '男', school: '北京大学', qualification: '本科' },
{ name: '行云', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
{ name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
{ name: '清夜', age: 18, gender: '男', school: '家里蹲大学', qualification: '初中' },
],
html部分
使用elementUI的表格,label是列名,prop是列值
<el-table :data="dataList" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column v-for="(item, index) in tableData" :key="index" :label="item.title" :prop="item.value"></el-table-column>
</el-table>
js部分
- 当表头数据不为空时,循环遍历表头数据;
- 在循环体中定义一个临时变量temp来存储处理过的数据,title为列名,value为列值,并返回这个temp;
- 最后得到this.tableData数组,存储的处理过的数据;
// 处理表格数据
loadTableList() {
if (this.headTableAtts && this.headTableAtts.length) {
this.tableData = this.headTableAtts.map(column => {
let temp = { title: column.columnLabel, value: column.columnName }
return temp
})
}
}
完整代码
<template>
<div>
<el-table :data="dataList" style="width: 80%;" row-key="id" border default-expand-all stripe>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column v-for="(item, index) in tableData" :key="index" :label="item.title" :prop="item.value"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 表头
headTableAtts: [
{ columnLabel: '姓名', columnName: 'name' },
{ columnLabel: '年龄', columnName: 'age' },
{ columnLabel: '性别', columnName: 'gender' },
{ columnLabel: '学校', columnName: 'school' },
{ columnLabel: '学历', columnName: 'qualification' },
],
// 表格
dataList: [
{ name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士' },
{ name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' },
{ name: '墨方', age: 18, gender: '男', school: '北京大学', qualification: '本科' },
{ name: '行云', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
{ name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
{ name: '清夜', age: 18, gender: '男', school: '家里蹲大学', qualification: '初中' },
],
// 处理后的表格数据
tableData: [],
}
},
mounted() {
// 页面一加载就调用处理表格数据的方法
this.loadTableList()
},
methods: {
// 处理表格数据
loadTableList() {
if (this.headTableAtts && this.headTableAtts.length) {
this.tableData = this.headTableAtts.map(column => {
let temp = { title: column.columnLabel, value: column.columnName }
return temp
})
}
}
}
}
</script>
<style lang="scss">
.el-table th.el-table__cell {
background-color: #D3E3FD !important;
}
</style>