封装详细信息组件

封装后的组件样式

子组件 detailList.vue

<template>
  <div class="detailList">
    <div v-for="(item, index) in detailList" :key="index" class="listBox">
      <div class="listLabel">{{ item.label }}</div>
      <div class="listValue">{{ detailValues[item.key] }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailList',
  props: {
    detailList: {
      type: Array,
      default: () => [],
    },
    detailValues: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

在父组件中使用

detail.vue

<detailList 
    ref="detailList" 
    :detailList="tableConfig.detailList" 
    :detailValues="detailInfo" />
    
import tableConfig from './configPage'

detailInfo:{
    storeName:'',
    hygieneLevel:'',
    houseNumber:'',
    address:'',
    status:'',
    businessHours:'',
    director:'',
    directorMobile:'',
    totalNumber:''
    }

configPage.js

存储页面不变的字段数据

// 详情界面表格
const detailList = [{
    label: '名称',
    key: 'storeName',
    value: '',
}, {
    label: '餐饮卫生等级',
    key: 'hygieneLevel',
    value: '',
}, {
    label: '门牌号',
    key: 'houseNumber',
    value: '',
}, {
    label: '详细地址',
    key: 'address',
    value: '',
}, {
    label: '营业状态',
    key: 'status',
    value: '',
}, {
    label: '营业时间',
    key: 'businessHours',
    value: '',
}, {
    label: '负责人',
    key: 'director',
    value: '',
}, {
    label: '负责人手机号',
    key: 'directorMobile',
    value: '',
}, {
    label: '总人数',
    key: 'totalNumber',
    value: '',
}]

export default {
    searchForm,
    tableList,
    replyForm,
    detailList,
    detailListBottom,
    temperatureList
};

注意：

子组件使用props时注意，若默认值为数组或对象，需要使用函数的方式展示。