eta_front/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': /* '指标名称' */ this.$t('Edb.Detail.e_name'),
        'EdbCode': /* '指标ID' */this.$t('Edb.Detail.e_id'),
        'Frequency': /* '更新频度' */this.$t('Edb.Detail.e_fre'),
        'Unit': /* '单位' */this.$t('Edb.Detail.e_unit'),
        'StartDate': /* '起始时间' */this.$t('Edb.Detail.e_start_time'),
        'LatestDate': /* '最新日期' */this.$t('Edb.Detail.e_latest_date'),
        'LatestValue': /* '最新值' */this.$t('Edb.Detail.e_latest_value'),
        'ModifyTime': /* '最近更新' */this.$t('Edb.Detail.e_recent_time'),
        'SourceName': /* '数据来源' */this.$t('Edb.Detail.source'),
      }
    };
  }
};
</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>