Element-ui $emit 在确认对话框中无效

Question

我试图从父页面获取子页面发送的请求，但是不成功。有人可以帮助我，谢谢。

1.父代号

<do-more @onreloadtab="reloadTab" :selectFolder="selectFolder"></do-more>
methods: {
  reloadTab: function() {
    console.log('reload')
  }
}

2.子代码

<template>
  <span class="do-more">
    <el-dropdown size="mini" @visible-change="dropdownChange($event)" 
      @command="dropdownCommon($event)" >
      <span class="el-dropdown-link">
        <el-button size="mini" type="text" icon="el-icon-more" 
          class="triggleBtn"></el-button>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="delete">del</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </span>
</template>

methods: {
  delete: function(row) {
    let that = this
    this.$confirm("Are you sure to delete?", "confirm")
      .then((config) => {
        that.$emit('onreloadtab')
      })
      .catch(() => {});
  }
}

Answer 1

将您的代码更改为：

<template>
  <span class="do-more">
    <el-dropdown size="mini" @visible-change="dropdownChange" 
      @command="dropdownCommon" >
      <span class="el-dropdown-link">
        <el-button size="mini" type="text" icon="el-icon-more" 
          class="triggleBtn"></el-button>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="delete">del</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </span>
</template>

methods: {
  dropdownCommon(command) {
    if(command === 'delete'){
      this.$confirm("Are you sure to delete?", "confirm")
      .then((config) => {
        this.$emit('onreloadtab')
      })
      .catch(() => {});
    }
    // other command
  }
}

单击下拉项el-dropdown-item 时，el dropdown 的@command 事件从el-dropdown-item 接收command 属性值。

您还可以使用@click 事件代替el-dropdown-item 上的command 属性。