小型网站开发费用,做公益网站需要什么资质,怎么看网站的建站公司是哪个,网站搭建的费用前提#xff1a;以下代码是vue2项目结合elementUi完成的
数据结构
后端传来的数据是两个list#xff0c;一个表头的list#xff0c;一个表格内容的list
// 表头
headTableAtts: [{ columnLabel: 姓名, columnName: name },{ columnLabel: 年龄, columnName: age },{ colu…前提以下代码是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 :datadataList stylewidth: 100%;margin-bottom: 20px; row-keyid border default-expand-allel-table-column typeselection width55/el-table-columnel-table-column v-for(item, index) in tableData :keyindex :labelitem.title :propitem.value/el-table-column
/el-tablejs部分
当表头数据不为空时循环遍历表头数据在循环体中定义一个临时变量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})}
}完整代码
templatedivel-table :datadataList stylewidth: 80%; row-keyid border default-expand-all stripeel-table-column typeselection width55/el-table-columnel-table-column v-for(item, index) in tableData :keyindex :labelitem.title :propitem.value/el-table-column/el-table/div
/templatescript
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})}}}
}
/scriptstyle langscss
.el-table th.el-table__cell {background-color: #D3E3FD !important;
}
/style页面效果
