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

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

• 页面

<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>

• js

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

这个地方的chooseProvince函数使用在点击标签页中的按钮进行地图定位的函数,只需要改变activeName的值就可以实现功能