div拼各种多样化表格，这个表格是以列遍历数据，应对各种复杂表格
2021-11-15 本文已影响0人
SY
image.png
话不多说，源码奉上，效果如上图所示
<template>
<div class="bottom-list">
<a-form-model style="width:1000px;margin:0 auto">
<a-row
:gutter="8"
type="flex"
class="row-bg"
justify="space-around">
<a-col :span="8">
<a-form-model-item label="版本号" >
<a-input v-model="param.demandTitle"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="类型" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col v-show="flag" :span="8">
<a-form-model-item label="类型2" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col v-show="flag" :span="8">
<a-form-model-item label="类型" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col v-show="flag" :span="8">
<a-form-model-item label="类型" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col v-show="flag" :span="8">
<a-form-model-item label="类型" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col v-show="flag" :span="8">
<a-form-model-item label="类型" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col v-show="flag" :span="8">
<a-form-model-item label="类型" >
<a-input v-model="param.demandTitle2"></a-input>
</a-form-model-item>
</a-col>
<a-col style="text-align:right;flex:1 1 0%; justify-content: end;" :span="8">
<a-form-model-item >
<a-button @click="inquire" type="primary" class="ant-btn-csy">
<span style="color:#fff">查询</span>
</a-button>
<a-button style="margin-left:5px" @click="reset" class="ant-btn-csy">
<span style="color:black">重置</span>
</a-button>
<a-button class="ant-btn-link ant-btn-csy" style="margin-left:5px;border:1px solid" @click="unfold" >
<span >{{title}}</span>
<a-icon :type="down"></a-icon>
</a-button>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!-- <div style="text-algin:center;width:1000px;margin:0 auto; font-size: 20px;color: #333;">
<span>
学费预算表
</span>
</div> -->
<div style="width:1000px;margin:0 auto; background:#f9f9f9;display: flex;justify-content: center;">
<div class="t-b-1">学校名称</div>
<div class="t-b-1">学校类型</div>
<div class="t-b-1">2021年学费预算</div>
<div class="t-b-1">2022年学费支出预算</div>
<div class="t-b-1"><li style="">2022年计划支出预算</li>
</div>
<!-- <li style="font-size: 12px;line-height: 0px">( before buyer's picking up at destination )</li> -->
</div>
<div v-for="(i,index) in tableInfo" :key="index" style="width:1000px;margin:0 auto; display: flex;justify-content: center;" >
<div class="t-b-3" style=" background:#fff;">
<div class="t-b-22">{{i.departname}}</div>
</div>
<div class="t-b-3" style=" background:#fff;">
<div class="t-b-2">{{i.nextPlanData.content}}</div>
<div class="t-b-2">{{i.nextPlanData.quantity}}</div>
<div class="t-b-2">{{i.nextPlanData.money}}</div>
<div class="t-b-2">{{i.nextPlanData.id}}</div>
<div class="t-b-2">{{i.nextPlanData.id}}</div>
</div>
<div class="t-b-3" style=" background:#fff;">
<div class="t-b-2">{{i.nextPlanData2.content}}</div>
<div class="t-b-2">{{i.nextPlanData2.quantity}}</div>
<div class="t-b-2">{{i.nextPlanData2.money}}</div>
<div class="t-b-2">{{i.nextPlanData2.id}}</div>
<div class="t-b-2">{{i.nextPlanData2.id}}</div>
</div>
<div class="t-b-3" style=" background:#fff;">
<div class="t-b-2">{{i.nextPlanData3.content}}</div>
<div class="t-b-2">{{i.nextPlanData3.quantity}}</div>
<div class="t-b-2">{{i.nextPlanData3.money}}</div>
<div class="t-b-2">{{i.nextPlanData3.id}}</div>
<div class="t-b-2">{{i.nextPlanData3.id}}</div>
</div>
<div class="t-b-3" style=" background:#fff;">
<div class="t-b-2">{{i.nextPlanData4.content}}</div>
<div class="t-b-2">{{i.nextPlanData4.quantity}}</div>
<div class="t-b-2">{{i.nextPlanData4.money}}</div>
<div class="t-b-2">{{i.nextPlanData4.id}}</div>
<div class="t-b-2">{{i.nextPlanData4.id}}</div>
</div>
</div>
<a-pagination style="display: flex;justify-content: end;margin-top: 20px
;margin-right: 260px;" v-model="current" :total="50" show-less-items />
</div>
</template>
<script>
import {getdataList} from "./api";
import Vue from 'vue'
export default {
data () {
return {
param:{
pageNum:1,
pageSize:10,
demandTitle:"",
demandTitle2:"",
},
current: 2,
title:"展示",
down:"down",
flag:false,
dense: false,
fixedHeader: false,
height: 300,
headers: [
{
text: '订单号',
align: 'left',
sortable: false,
value: 'orderId'
},
{ text: '学校名', value: 'departname' },
{ text: '学校类型', value: 'content' },
{ text: '2021年学费支出预算', value: 'quantity' },
{ text: '订单金额', value: ' money' },
],
tableInfo:[{
orderId:'002111000',
amount:'5300',
departname:'学校1',
nextPlanData:{
id:'113',
content:'学校类型',
quantity:'1',
money:'3800',
},
nextPlanData2:{
id:'114',
content:'2定分类',
quantity:'2',
money:'3801',
},
nextPlanData3:{
id:'115',
content:'3定分类',
quantity:'3',
money:'3802',
},
nextPlanData4:{
id:'116',
content:'4定分类',
quantity:'4',
money:'3803',
},
},{
orderId:'002111001',
amount:'2500',
departname:'学校2',
nextPlanData:{
id:'113',
content:'学校类型',
quantity:'1',
money:'3800',
},
nextPlanData2:{
id:'114',
content:'2定分类',
quantity:'2',
money:'3801',
},
nextPlanData3:{
id:'115',
content:'3定分类',
quantity:'3',
money:'3802',
},
nextPlanData4:{
id:'116',
content:'4定分类',
quantity:'4',
money:'3803',
},
},{
orderId:'002111002',
amount:'1000',
departname:'学校3',
nextPlanData:{
id:'113',
content:'学校类型',
quantity:'1',
money:'3800',
},
nextPlanData2:{
id:'114',
content:'2定分类',
quantity:'2',
money:'3801',
},
nextPlanData3:{
id:'115',
content:'3定分类',
quantity:'3',
money:'3802',
},
nextPlanData4:{
id:'116',
content:'4定分类',
quantity:'4',
money:'3803',
},
}]
}
},
activated () {
console.log("activated调用了");
},
methods:{
async inquire(){
console.log(this.param.demandTitle);
console.log(this.param.demandTitle2);
if(this.param.demandTitle2==""){
delete this.param.demandTitle2;
}else if(this.param.demandTitle==""){
delete this.param.demandTitle;
}
// for(let i = 0;i<this.param.length;i++){
// console.log("11")
// console.log(this.param[i]);
// }
const data = await getdataList(this.param)
console.log(data);
},
reset(){
Vue.prototype.$loading.show();
// this.param.demandTitle = "";
// this.param.demandTitle2 = "";
// let param = Object.values(this.param).filter(function(item){
// if(item !=""){
// item = "";
// }
// });
// this.param = param;
// console.log(this.param);
},
unfold(){
console.log(this.flag);
if(this.flag == false){
this.down = "up";
this.title = "收起";
this.flag = true;
}else{
this.down = "down";
this.title = "展开";
this.flag = false;
}
}
}
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.t-b-3{
width: 20%;
}
.t-b-22{
border: 1px solid #f0f0f0;
/* width: 20%; */
height: 250px;
text-align: center;
line-height: 250px;
}
.bottom-list .t-b-1{
border: 1px solid #f0f0f0;
width: 20%;
height: 50px;
font-size: 14px;
text-align: center;
line-height: 50px;
background-color: rgb(249, 249, 249);
}
.bottom-list .t-b-2{
border: 1px solid #f0f0f0;
/* width: 20%; */
height: 50px;
text-align: center;
line-height: 50px;
}
.ant-btn-csy{
height: 24px;
padding: 0 7px;
font-size: 14px;
border-radius: 2px;
text-align: center;
}
.ant-btn>.antion{
line-height: 1;
}
</style>
