生命周期

<template>
<section id="v-detail" v-if="detailSettings">
<div v-for="(section,index) in detailSettings" :key="index" class="detail-block">
<h3 class="h3-title">{{section.label}}</h3>
<div v-for="(item,index) in section.items" :key="index" class="detail-content">
<el-form label-position="right" size="mini" label-width="180px" class="table-expand">
<el-form-item :label="item.name+'：'">
<span>{{detail[item.fieldName]}}</span>
</el-form-item>
</el-form>


</div>
</div>
</section>
</template>

<script>
export default {
name: 'vDetail',
props: {
detailSettings: {
type: Array,
require: true
},
detailData: {
type: Object,
require: true
}
},
data () {
return {
detail: null
}
},
created () {
this.upData()
},
methods: {
interaction (data) {
this.$emit("tudu", data)
},
upData () {
let tmpSetting = {}
this.detailSettings.forEach((item) => {
item.items.forEach((item) => {
if (this.detailData && this.detailData[item.fieldName]) {
tmpSetting[item.fieldName] = this.detailData[item.fieldName]
} else {
tmpSetting[item.fieldName] = null
}
})
})
this.detail = tmpSetting
console.log(tmpSetting)
}
},
watch: {
detailSettings () {
this.updata()
}
}
}
</script>

<style lang='scss'>
.detail-block {
border-bottom: 1px solid $color-border;
.h3-title {
margin-top: 10px;
}
.detail-content {
margin-top: 15px;
margin-bottom: 5px;
}
}

.item-interaction {
cursor: pointer;
color: #409eff;
}

.table-expand label {
color: #99a9bf;
}

.table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>