hz_crm_web/src/components/edbDetailPopover.vue

<template>
  <el-popover
    placement="right"
    title=""
    width="350"
    offset="100"
    trigger="hover"
  >
    <ul class="edb-info-cont">
      <li v-for="key in keysArr" :key="key">
        <label class="li-label">{{keysLabel[key]}}</label> 
        {{info[key]}}
      </li>
    </ul>
    <div slot="reference">
      <slot name="reference"/>
    </div>
  </el-popover>
</template>
<script>
export default {
  name: "mDialog",
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  computed: {
    keysArr(){
      return Object.keys(this.keysLabel)
    }
  },
  data() {
    return {
      keysLabel: {
        'EdbName': '指标名称',
        'EdbCode': '指标ID',
        'Frequency': '更新频度',
        'Unit': '单位',
        'StartDate': '起始时间',
        'LatestDate': '最新日期',
        'LatestValue': '最新值',
        'ModifyTime': '最近更新',
        'SourceName': '数据来源',
      }
    };
  }
};
</script>

<style scoped lang="scss">
.edb-info-cont {
  background: #fff;
  padding: 20px 20px 10px;
  li {
    margin-bottom: 20px;
    display: flex;
    font-size: 14px;
    .li-label {
      min-width: 100px;
      margin-right: 20px;
    }
  }
}
</style>