fj-dc-ui/.svn/pristine/46/4604247a2e47b4348b82b00fc4f417e2d63d8434.svn-base

<template>
  <el-container>
    <el-tabs v-model="currentTab"  class="tabItem" @tab-click="handleClick">
      <el-tab-pane  :lazy="true"
                    :label="option.label"
                    :name="option.label"
                    v-for="option in tabItems">
        <component
          :is="option.value"
          v-if="currentTab==option.label"
          :id="'f9397893dfdfd4878945757'"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script>
  import baseInfo from './baseInfo'
  import flowFile from './flowFile'
  import idea from './idea'
  import flowChart from './flowChart'
  export default {
    components: {
        baseInfo,
        flowFile,
        idea,
        flowChart
    },
    data() {
      return {
          currentTab:'基本信息',
          tabItems:[
              {
                  label:'基本信息',
                  value:'baseInfo'
              },
              {
                  label:'流程附件',
                  value:'flowFile'
              },
              {
                  label:'岗位意见历史',
                  value:'idea'
              },
              {
                  label:'流程图',
                  value:'flowChart'
              }
          ]
      }
    },
    computed: {

    },
    activated() {

    },
    created(){

    },
    mounted(){

    },
    methods: {
        handleClick(item){
           this.currentTab = item.label;
        }
    },
    watch: {
    }
  }
</script>
<style>
  .el-tabs__header{
    margin: 0 !important;
  }
</style>
<style scoped>
  .el-container {
    width: 100%;
    height:100%;
  }
  .tabItem{
    width: calc(100% - 20px);
    height:100%;
    margin:0 auto;
  }
</style>