vue+element:el-descriptions组件，数据绑定、内容样式和标签样式自定义

1.绑定接口数据——默认样式展示（未自定义宽度）：

2.绑定接口数据——自定义样式展示：

3.使用的语法

labelStyle="width: 150px"
contentStyle="width: 250px"

4.Vue代码展示：

      
        
        {{this.appointUnitForm.appointName}}
      
      
        
        {{this.appointUnitForm.appointType}}
      
      
        
        {{this.appointUnitForm.appointYear}}
      
      
        
        {{this.appointUnitForm.appointCtime}}
      
      
        
        {{this.appointUnitForm.appointOpenFlag}}
      
      
        
        {{this.appointUnitForm.appointOpenRange}}
      
      
        
        {{this.appointUnitForm.appointOperator}}
      
      
        
        {{this.appointUnitForm.appointOrder}}
      
      
        
        {{this.appointUnitForm.appointMemo}}
      
    

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',
  })
}