javascript - vue 点击按钮触发另一个dom的click事件

问题描述

问 题

使用elementUi 组件 点击默认按钮触发另一个tabs组件上的click事件，如何实现?

<template>
 <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first" :disabled = "boolea1">
         <span class="date">内容输入</span><el-input v-model="input" placeholder="请输入内容"></el-input>
        <DatePicker></DatePicker>
        <span class="select">选择</span><el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
        <span class="temp">内容输入</span><el-input v-model="input" placeholder="请输入内容"   ></el-input>
        <br>
        <span class="wind">内容输入</span><el-input v-model="input" placeholder="请输入内容"  ></el-input>
           <br><br>
           <el-button @click="switchTab">默认按钮</el-button>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second"  :disabled = "boolea2" ref='config'>配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third"  :disabled = "boolea3">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth"  :disabled = "boolea4">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script>
    import DatePicker from './DatePicker.vue'
 export default {
       components:{
           DatePicker
       },
    data() {
      return {
        activeName2: 'first',
         input: '',
         options: [{
          value: '选项1',
          label: '黄金糕'
        },{
          value: '选项2',
          label: '北京烤鸭'
        }],
        value: '',
        boolea1: true,
        boolea2: true,
        boolea3: true,
        boolea4: true
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      switchTab(){
           this.boolea2 = false;
           console.log(this.$refs.config.$el);
      }
    }
  };
</script>

解决方案

直接用原生js操作dom了，办法比较笨，效果是实现了。

    methods: {
      handleClick(tab, event) {
        console.log(tab, event);     
      },
      switchTab(){
           this.boolea2 = false;        
      }
    },
    updated(){
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
           console.log(this.boolea2);
           let index = this.$refs.config.index;
           eleNav[index].click();          
    }

这篇关于javascript - vue 点击按钮触发另一个dom的click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！