element-ui tabs点击一个子组件中的按钮或图标，切换到另一个tabs组件中

笑到世界都狼狈

已于 2022-11-09 15:53:28 修改

阅读量4.5k

点赞数 1

分类专栏： element-ui 文章标签： elementui tabs vue tabs点击子组件切其它子组件

于 2021-08-24 19:56:27 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/119897411

版权

element-ui 专栏收录该内容

18 篇文章

订阅专栏

我在项目中，遇到一个tabs下放了两个组件，组件1是拓扑图，组件2是详情，我要点击组件1中拓扑图的节点跳转到组件2的详情中，于是就有了如下图所示的需求：

简单的实现思路就是，点击按钮的时候，子组件向父组件传递tabs想要跳转页面的name,即可实现效果，项目具体实现结构如下图所示：

注：主要实现是红色标记的部分

简单代码如下：

父组件：

<template>
  <div class="app-container">
    <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="tabClick">
      <el-tab-pane label="拓扑图" name="topo" >
        <server-topo ref="topoCanvas" :data-topo="dataTopo" :links="links" @updateActiveName="updateActiveName"></server-topo>
      </el-tab-pane>
      <el-tab-pane label="详细信息" name="serverInfo">
        <server-detail ref="ServerDetail" :server-info-list="serverInfoList"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script type="text/jsx">
import ServerDetail from '@/views/system/deviceManage/serverInfo/serverDetail'
import ServerTopo from '@/views/system/deviceManage/serverInfo/serverTopo'


export default {
  name: 'ServerInfo',
  components: { ServerDetail, ServerTopo },
  props: {
  },
  data() {
    return {
      activeName: 'topo',
      serverInfoList: [],
      dataTopo: [],
      links: [],
      number: undefined
    }
  },
  created() {
    this.sendToServerList()
  },
  methods: {
    updateActiveName(data) {
      // 修改activeName的名称
      this.activeName = data
    },
    tabClick(pane, event) {

    }
  }
}
</script>


<style scoped>


</style>

要实现点击效果的子组件：

// 双击节点时，跳转到服务器详细信息中
echarts.init(chart).on('dblclick', function(params) {
  if (params.dataType == 'node') {
    // 子组件向父组件传值，修改tabs的activeName,从而达到组件切换的效果
    that.$emit('updateActiveName', 'serverInfo')
  }
});