vue爬坑记:element-ui的标签页之间跳转的手动控制

AlexKain

于 2018-07-06 10:21:42 发布

阅读量1.2w

点赞数 1

分类专栏： vue 日常学习和储备[暂存区] 文章标签： element-ui tabs

本文链接：https://blog.csdn.net/webfullstack/article/details/80937084

版权

vue 同时被 3 个专栏收录

32 篇文章

订阅专栏

element-ui

28 篇文章

订阅专栏

日常学习和储备[暂存区]

24 篇文章

订阅专栏

本文记录了在Vue项目中使用Element-UI的tabs组件时，如何手动控制标签页之间的跳转。通过点击按钮触发特定函数，如chooseProvince，改变activeName的值来实现不同页面间的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制标签页之间的跳转-手动控制

页面

<el-row class="marginTop5">
   <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :span="24" class="t-c-t">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="省份" name="province">
              <el-button style="width:100px;" @click="chooseProvince(province.code,province.name)" v-for="province in addressList" :key='province.name'>{{province.name}}</el-button>
           </el-tab-pane>
           <el-tab-pane label="城市" name="city" @click="chooseCity(city.code,city.name)">配置管理</el-tab-pane>
              <el-tab-pane label="区县" name="county">角色管理</el-tab-pane>
         </el-tabs>
    </el-col>
</el-row>

export default {
  data() {
    return {
      radio: "0",
      activeName: 'province',
      }
   },
   methods:{
    chooseProvince(code, name) {
      this.activeName="city";
    },
   }
}