big_data_ott/src/views/BoutiqueColumn/BoutiqueColumn.vue

<template>
  <div class="boutiqueColumn">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
      <el-breadcrumb-item>重点栏目分析</el-breadcrumb-item>
    </el-breadcrumb>
    <el-loading></el-loading>
    <el-tabs
      tab-position="top"
      style="max-height: 100%;"
      @tab-click="selectTab"
      v-model="select"
    >
      <el-tab-pane
        v-for="(item, i) in columnNames"
        :key="i"
        :label="item.programName"
        :name="item.component"
      >
        <div
          class="tab-body"
          v-if="item.component === select || selectA[item.component]"
        >
          <component :is="item.component" :item="item"></component>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import { epgList } from "@/api/index";
// 重点栏目分析
import huashanlunjian from "./views/huashanlunjian.vue";
import dialogueSecretary from "./views/dialogueSecretary.vue";
import policeStory from "./views/policeStory.vue";
import shaanxiNewsSimulcast from "./views/shaanxiNewsSimulcast.vue";
import hundredBrokenPlays from "./views/hundredBrokenPlays.vue";
import urbanExpressNews from "./views/urbanExpressNews.vue";

export default {
  name: "boutiqueColumn",
  data() {
    return {
      columnNames: [],
      select: "",
      selectA: {},
    };
  },
  mounted() {
    epgList().then(programList => {
      this.columnNames = programList || [];
      this.select = (this.columnNames[0] || {}).component;
      this.selectA[this.select] = true;
    });
  },
  computed: {},
  methods: {
    selectTab(tab) {
      try {
        this.select = this.columnNames[tab.index].component;
        this.selectA[this.select] = true;
      } catch (err) {
        console.log(err);
      }
    },
  },
  beforeUnmount: function() {},
  components: {
    huashanlunjian,
    dialogueSecretary,
    policeStory,
    shaanxiNewsSimulcast,
    hundredBrokenPlays,
    urbanExpressNews,
  },
};
</script>

<style>
.boutiqueColumn {
  padding: 10px 15px;
  box-sizing: border-box;
}
.tab-body {
  padding-bottom: 20px;
}
.export{
    float: right!important;
    margin: 10px;
}
</style>