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 data.businessParams"
      :key="index"
    >
      <span :style="paramStyle">{{ info.name }}</span>
      <span>：</span>
      <span>{{ fieldInfos[info.field] }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "head-stdinfo",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      fieldInfos: this.data["fieldInfos"] || {},
      paramStyle: {},
      lenWidths: {
        3: 42,
        4: 60,
        5: 70,
        6: 84,
        7: 98,
        8: 112
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const nameNums = this.data.businessParams.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>