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

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