97 lines
1.5 KiB
Vue
97 lines
1.5 KiB
Vue
<template>
|
|
<div class="feesTable">
|
|
<el-scrollbar>
|
|
<table>
|
|
<thead class="columnView">
|
|
<tr class="th">
|
|
<th class="td sq">序号</th>
|
|
<th class="td">成本类型</th>
|
|
<th class="td" v-for="(item,index) in data.header" :key="index">{{item}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="rowView">
|
|
<tr class="tr" v-for="(item,index) in data.data" :key="index">
|
|
<td class="td sq">{{index + 1}}</td>
|
|
<td class="td" v-for="(em,ind) in item" :key="ind">{{em}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "",
|
|
props:{
|
|
info:{
|
|
type:Object,
|
|
}
|
|
},
|
|
watch:{
|
|
info:{
|
|
handler(val){
|
|
if(val){
|
|
this.data = val;
|
|
}
|
|
},
|
|
deep:true
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
data:this.info
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.columnView{
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
.th{
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
background: #F5F7FA;
|
|
padding: 4px 5px;
|
|
.td{
|
|
white-space: nowrap;
|
|
margin: 0 10px;
|
|
line-height: 23px;
|
|
width: 90px;
|
|
text-align: left;
|
|
color: #606266;
|
|
font-weight: 400;
|
|
}
|
|
.sq{
|
|
width: 45px;
|
|
}
|
|
}
|
|
}
|
|
.rowView{
|
|
.tr{
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
border-bottom: 1px solid #ebeef5;
|
|
padding: 4px 5px;
|
|
.td{
|
|
white-space: nowrap;
|
|
margin: 0 10px;
|
|
width: 90px;
|
|
line-height: 23px;
|
|
color: #222;
|
|
}
|
|
.sq{
|
|
width: 45px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|