vue组件-table.vue

借用table组件会说一下父子组件的传值。

子组件Table.vue，排名用index，并且自递增，标题的值和数据都是通过父组件传过来的。子组件通过props设置tabHeades：Array，tabDatas：Array接收iu父组件传过来的数组。

<template>
  <li class="tab-wrapper">
    <ul class="tab-title" :class="headSelect=='sumH'?'c0bdf':''">
      <li>排名</li>
      <li
        v-for="head in heades"
        :key="head.key"
        @click="titleClick(head.key)"
        :class="headSelect==head.key?'c0bdf':''"
      >{{ head.label }}</li>
    </ul>
    <ul class="tab-content" v-for="(item, index) in tabDatas" :key="index"  @click="showCard(index)">
      <li class="first-li">{{index+1}}</li>
      <li v-if="item.name">{{item.name}}</li>
      <li v-if="item.sumH">{{item.sumH}}</li>
      <li v-if="item.infExponent">{{item.infExponent}}</li>
      <li class="second-li">
        <div class="title-card">
          <BaseProgress
            :percentNum="item.infExponent"
            :index="index"
            v-show="headSelect=='infExponent'"
            style=" width: 100%;"
          />
          <BaseProgress
            :percentNum="item.sumHNum"
            :index="index"
            v-show="headSelect=='sumH'"
            style=" width: 100%;"
          />
          <BaseCard
            v-show="item.show"
            :img="item.img"
            :startTime="item.startTime"
            :tags="item.tags"
            :level="item.level"
            :lengthTime="item.lengthTime"
            :rate="item.rate"
            :rateCtegory="item.rateCtegory"
            :region="item.region"
            :item="item"
            style="width: 100%"
          />
        </div>
      </li>
    </ul>
  </li>
</template>
<style scoped>
.tab-wrapper {
  width: 100%;
  overflow: scroll;
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  padding: 0.5vh 0.6vw 0 0.6vw;
}

.title-card {
  width: 100%;
  height: 100%;
}

.c0bdf {
  color: #00bdff;
}

.tab-title {
  width: 100%;
  height: 30px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0;
  padding-left: 0;
}

.tab-title li {
  font-size: 0.8rem;
  text-align: center;
  padding: 2% 0;
  float: left;
}

.f14 {
  font-size: 0.5rem;
}

.tab-content {
  margin-bottom: 0;
  padding-left: 0;
  font-size: 0.7rem;
  padding-top: 0.2vh;
}

.tab-content li {
  float: left;
  text-align: center;
  min-height: 0.7vh;
}

.tab-content li.first-li {
  width: 2vw;
}

.tab-content li.second-li {
  width: 20vw;
}

.tab-content li.second-li .title-card div {
  width: 100%;
  float: left;
  margin: 0;
}
.tab-content li:first-child{
  text-align: left;
}

.tab-content li:nth-child(2),
.tab-title li:nth-child(2) {
  width: 56%;
}
.tab-content li:nth-child(2){
  text-align:left;
}

.tab-content li:nth-child(3),
.tab-title li:nth-child(3) {
  width: 19%;
}

.tab-content li:nth-child(4),
.tab-title li:nth-child(4) {
  width: 15%;
}
</style>

<script>
import BaseProgress from "Base/BaseProgress";
import BaseCard from "Base/BaseCard";

export default {
  name: "table-component",
  components: {
    BaseProgress,
    BaseCard
  },
  props: {
    tabHeades: Array,
    tabDatas: Array
  },
  data() {
    return {
      isShow: true,
      headSelect: "sumH",
      heades: [],
      lengthTime: "" //持续时长
    };
  },
  mounted() {
    this.heades = this.tabHeades;
    this.titleClick(this.headSelect);
    for (let i in this.tabDatas) {
      this.$set(this.tabDatas[i], "show", false);
    }
  },
  methods: {
    titleClick(key) {
      let _this = this;
      if (this.headSelect !== key) {
        if (key === "sumH" || key === "infExponent") {
          this.headSelect = key;
        }
      }
      if (this.headSelect == "sumH") {
        this.tabDatas.sort(function(a, b) {  
          return a.sumH - b.sumH;
        });
        this.tabDatas.reverse();
      }
      if (this.headSelect == "infExponent") {
        this.tabDatas.sort(function(a, b) {
          return a.infExponent - b.infExponent;
        });
        this.tabDatas.reverse();
      }
    },
    showCard(key) {
      this.$set(this.tabDatas[key], "show", !this.tabDatas[key]["show"]);
    }
  }
};
</script>

父组件：

<MyTable v-if="flag" :tabHeades="tabHeades" :tabDatas="tabDatas" style="height: 47vh;"></MyTable>

设置v-if="flag"，是为了在获取到tabDatas数据后再去渲染，不然会出现，浏览器先渲染了DOM，然后没有数据，报错。

由于是大屏，在几分钟后会再次刷新tabDatas，那么就需要在子组件table.vue中加入watch监听是否有新的数据传入。

在子组件的JS中，加入以下代码：

watch: {
    tabDatas: {
      handler(newValue, oldValue) {
        for (let i = 0; i < newValue.length; i++) {
          if (oldValue[i] != newValue[i]) {
            this.tabDatas = newValue;
            this.titleClick(this.headSelect)
          }
        }
      },
      deep: true
    }
  },

基本上所有的代码都已经展出，数据格式这个，暂时不放了。

谨以此作记录。