前端 element 动态渲染可折叠的数据展示卡片（附带报警状态）

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">{{ item.titleName }}</span>

      <span
        :class="[`color${item.status}`]"
        style="float: right; padding: 3px 0"
        type="text"
      >
        {{ stateFormat(item.status) }}
      </span>
    </div>
    <template v-if="item.localResultList && item.localResultList.length > 0">
      <template v-if="importantList.length < 2">
        <div v-for="c in item.localResultList" :key="c.name">
          <p>
            <span class="name">{{ c.name ? c.name : "--" }}</span>

            <span class="num">
              {{ c.value ? c.value : "--" }}
            </span>
            <span class="unit">{{ c.unit ? c.unit : "--" }}</span>
          </p>
        </div>
      </template>
      <!-- 可查看更多的数据展示 -->
      <template v-else>
        <div v-for="c in importantList" :key="c.id">
          <p>
            <span class="name">{{ c.name ? c.name : "--" }}</span>

            <span class="num">
              {{ c.value ? c.value : "--" }}
            </span>
            <span class="unit">{{ c.unit ? c.unit : "--" }}</span>
          </p>
        </div>
        <el-collapse-transition>
          <div v-show="showMore">
            <div v-for="c in otherList" :key="c.id">
              <p class="tableData">
                <span class="name">{{ c.name ? c.name : "--" }}</span>

                <span class="num">
                  {{ c.value ? c.value : "--" }}
                </span>
                <span class="unit">{{ c.unit ? c.unit : "--" }}</span>
              </p>
            </div>
          </div>
        </el-collapse-transition>
        <div style="text-align: center; margin-top: 20px">
          <el-button
            type="primary"
            round
            icon="el-icon-d-caret"
            size="medium"
            v-if="importantList.length > 0 && otherList.length > 0"
            @click="showMore = !showMore"
          >
            {{ showMore ? "收起" : "展开" }}
          </el-button>
        </div>
      </template>
    </template>
    <template v-else>
      <p class="no-data">暂无数据</p>
    </template>
  </el-card>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      showMore: false,
    };
  },
  computed: {
    importantList() {
      return this.item.localResultList.filter((i) => {
        return i.isView == 0;
      });
    },
    otherList() {
      return this.item.localResultList.filter((i) => {
        return i.isView != 0;
      });
    },
  },
  mounted() {},
  methods: {
   
    // 状态翻译
    stateFormat(status) {
      switch (status) {
        case 0:
          return "正常";
        case 1:
          return "故障";
        case 2:
          return "离线";
        default:
          return "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main-box {
  display: flex;
  justify-content: flex-start;
}

.item {
  margin-bottom: 18px;
}
.box-card {
  min-width: 23%;
  margin: 12px 1%;

  .title {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
  }
  .color0 {
    color: #00e266;
  }
  .color1 {
    color: #d4321c;
  }

  .color2 {
    color: grey;
  }

  p {
    padding: 0;
    font-size: 14px;
    margin: 10px 0;
    .name {
      display: inline-block;
      width: 30%;
      text-align: right;
      margin-right: 5%;
    }
    .num {
      display: inline-block;
      padding-left: 4%;
      width: 42%;
      font-size: 18px;
      color: #409eff;
    }
    .unit {
      display: inline-block;
      width: 18%;
    }
  }
  .no-data {
    text-align: center;
    color: #999;
  }
}
</style>