Element UI组件的Tabs 标签页简易使用

注：这是一篇没啥营养的随便的笔记

例子

<el-tabs type="border-card" stretch=true v-model="activeName"  @tab-click="handleChangeView(activeName)">
    <el-tab-pane label="歌曲" name="Songs">歌曲</el-tab-pane>
    <el-tab-pane label="歌单" name="SongLists">歌单</el-tab-pane>
    <el-tab-pane label="歌手" name="Singers">歌手</el-tab-pane>
  </el-tabs>
  <searchresult :is="currentView"></searchresult>
  <!-- 根据选择不同卡片，展现不同的搜索结果 -->

export default {
  name: 'search',
  components: {
    searchSongs,
    searchSongLists,
    searchSingers

  },
  data () {
    return {
      // 默认时的数据
      activeName: 'Songs',
      currentView: 'searchSongs'
    }
  },
  methods: {
    // 切换组件
    handleChangeView (activeName) {
      this.currentView = 'search' + activeName
    }
  }

}
</script>

结果

更简单点

<el-tabs type="border-card" stretch=true v-model="activeName">
    <el-tab-pane label="歌曲" name="Songs">歌曲<searchSongs/></el-tab-pane>
    <el-tab-pane label="歌单" name="SongLists">歌单<searchSongLists/> </el-tab-pane>
    <el-tab-pane label="歌手" name="Singers">歌手<searchSingers/></el-tab-pane>
  </el-tabs>

 components: {
    searchSongs,
    searchSongLists,
    searchSingers

  },
  data () {
    return {
      // 默认时的数据
      activeName: 'Songs',
      currentView: 'searchSongs'
    }
  }

结果

详细链接

Element UI组件Tabs 标签页