1.绑定接口数据——默认样式展示(未自定义宽度):
2.绑定接口数据——自定义样式展示:
3.使用的语法
labelStyle="width: 150px"
contentStyle="width: 250px"
4.Vue代码展示:
<el-descriptions class="margin-top" :column="3" style="width: 1250px" border>
<el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
<template slot="label"><i class="el-icon-user"></i>预约单元名称</template>
{{this.appointUnitForm.appointName}}
</el-descriptions-item>
<el-descriptions-item class="contentClassName">
<template slot="label"><i class="el-icon-mobile-phone"></i>预约类别</template>
{{this.appointUnitForm.appointType}}
</el-descriptions-item>
<el-descriptions-item labelStyle="width: 200px" contentStyle="width: 200px">
<template slot="label"><i class="el-icon-location-outline"></i>预约单元归属年份</template>
{{this.appointUnitForm.appointYear}}
</el-descriptions-item>
<el-descriptions-item class="el-descriptions-item__cell">
<template slot="label"><i class="el-icon-tickets"></i>创建时间</template>
{{this.appointUnitForm.appointCtime}}
</el-descriptions-item>
<el-descriptions-item class="el-descriptions-item__cell">
<template slot="label"><i class="el-icon-office-building"></i>启用状态</template>
{{this.appointUnitForm.appointOpenFlag}}
</el-descriptions-item>
<el-descriptions-item class="el-descriptions-item__cell">
<template slot="label"><i class="el-icon-star-off"></i>开放范围</template>
{{this.appointUnitForm.appointOpenRange}}
</el-descriptions-item>
<el-descriptions-item class="el-descriptions-item__cell">
<template slot="label"><i class="el-icon-goods"></i>操作人ID</template>
{{this.appointUnitForm.appointOperator}}
</el-descriptions-item>
<el-descriptions-item class="el-descriptions-item__cell">
<template slot="label"><i class="el-icon-picture-outline-round"></i>排序号</template>
{{this.appointUnitForm.appointOrder}}
</el-descriptions-item>
<el-descriptions-item class="el-descriptions-item__cell">
<template slot="label"><i class="el-icon-bell"></i>备注</template>
{{this.appointUnitForm.appointMemo}}
</el-descriptions-item>
</el-descriptions>
5.JS调用代码展示——传递回来的接口数据——this.appointUnitForm的数据类型——对象
关键代码:this.appointUnitForm = response
/** 查询数据列表 */
getList() {
this.loading = true
console.log("this.$route.params.appointId:", this.$route.params.appointId)
listAppointmentUnitDetail(this.$route.params.appointId).then(response => {
this.appointUnitForm = response
console.log("response:", response)
this.loading = false
})
},
6.JS请求代码展示
import request from "../../../utils/request";
// 后端接口:查询1条详情
export function listAppointmentUnitDetail(id) {
return request({
url: '/center/appointUnit/detail/' + id,
method: 'get',
})
}