vue.js中选择名称显示对应页面

<template>
  <el-container style="display: flex; flex-direction: column; height:100vh;">
    <el-main>
      <el-form label-position="top" label-width="80px">
        <el-row :gutter="10" align="middle">
          <el-col :span="24" >
            <el-form-item label="选择表">
              <el-select v-model="applyForm.tName" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in applys" :label="item.title" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10" align="middle">
          <el-col :span="24">
            <C v-on:val="showval" v-if="applyForm.tName=='apply_form_c'"/>
            <Ie v-on:val="showval" v-else-if="applyForm.tName=='apply_form_i'"/>
            <Ct v-on:val="showval" v-else-if="applyForm.tName=='project_cot'"/>
            <P v-on:val="showval" v-else-if="applyForm.tName=='apply_form_p'"/>
            <Z v-on:invalid="showval" v-else-if="applyForm.tName=='apply_form_z'"/>
            <J v-on:invalid="showval" v-else-if="applyForm.tName=='apply_form_j'"/>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import C from '@/views/modules/applyStatistical/statis_c'
  import I from '@/views/modules/applyStatistical/statisl_i'
  import Co from '@/views/modules/applyStatistical/statis_project_co'
  import P from '@/views/modules/applyStatistical/statis_p'
  import Z from '@/views/modules/applyStatistical/statisl_z'
  import J from '@/views/modules/applyStatistical/statis_j'

  export default {
    components: {
      C,
      I,
      Co,
      P,
      Z,
      J
    },
    data () {
      return {
        loadingInstance: '',
        applyForm: {
          tName: ''
        },
        applyFormData: [],
        deptList: [],
        applys: [
          {'title': '财统计', value: 'apply_form_c'},
          {'title': '发统计', value: 'apply_form_i'},
          {'title': '合统计', value: 'project_co'},
          {'title': '采统计', value: 'apply_form_p'},
          {'title': '转统计', value: 'apply_form_z'},
          {'title': '借统计', value: 'apply_form_j'}
        ],
        applyTb: '',
        third_no: '',
        items: '',
        nodes: '',
        title: ''
      }
    },
    methods: {}
  }
</script>