teachcloud-print-web/card/elements/card-head/cardHeadSpin/HeadStdinfo.vue

<template>
  <div class="head-stdinfo card-head-body-spin">
    <div class="stdinfo-item" v-for="(info, index) in fields" :key="index">
      <span :style="paramStyle">{{ info.name }}</span>
      <span>：</span>
      <span>{{ fieldInfos[info.code] }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "head-stdinfo",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      fieldInfos: this.data["fieldInfos"] || {},
      fields: [],
      paramStyle: {},
      lenWidths: {
        3: 44,
        4: 62,
        5: 72,
        6: 86,
        7: 100,
        8: 114,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.fields = [
        ...this.data.requiredFields,
        ...this.data.extendFields,
      ].filter((item) => item.enable);
      const nameNums = this.fields.map((item) => item.name.length);
      const maxNameLen = Math.max.apply(null, nameNums);
      const num = maxNameLen < 3 ? 3 : maxNameLen > 8 ? 8 : maxNameLen;
      this.paramStyle = {
        width: this.lenWidths[num] + "px",
      };
    },
  },
};
</script>