Select 下拉菜单中的元素问题

Question

我目前正在 Element UI 中试验一个用于 ui 的漂亮的 VueJS 框架。我在将 select 元素放入下拉菜单时遇到问题，因为当我 select select 元素中的一个项目时，它也会关闭下拉菜单。

当我在 select 元素中 select 一个项目时，我应该如何让下拉列表保持不变？

这是示例演示。 fiddle https://jsfiddle.net/vy70ogbz/

Answer 1

为什么不使用菜单来实现这一点。我发现它更灵活，您可以使用 menu-trigger="click" 属性仅在单击时切换菜单。像这样

 <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      menu-trigger="click"
      @select="handleSelect">

      <el-submenu
        class="sub-menu-more">
        <template slot="title">
          <b>Click to dropdown</b>
        </template>
        <el-menu-item
          index="1">
          <span >Team</span>
        </el-menu-item>
        <el-menu-item
          index="2">
          <span >Product</span>
        </el-menu-item>
        <el-menu-item
          index="3">
          <span >item</span>
        </el-menu-item>
        <el-menu-item
          index="4">
         <el-select v-model="value" placeholder="Select">
        <el-option
         :label="'test1'"
         :value="'test1'">
        </el-option>
        <el-option
         :label="'test1'"
         :value="'test1'">
        </el-option>
        <el-option
          :label="'test1'"
          :value="'test1'">
        </el-option>
      </el-select>
        </el-menu-item>
      </el-submenu>
   </el-menu>

see fiddle

Answer 2

我遇到了同样的问题，我通过小技巧解决了它：打开下拉菜单时，我将 disabled="true" 属性设置为触发按钮。

<el-button
    :disabled="dropdownIsOpen"
    slot="button"
>Open</el-button>

之所以可行，是因为在源代码中我们有这种情况的条件 https://github.com/ElemeFE/element/blob/dev/packages/dropdown/src/dropdown.vue#L121

示例：click

Answer 3

您可以防止下拉菜单隐藏。

在您的模板中使用以下代码

<el-dropdown ref="dropdown" trigger="click">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Action 1</el-dropdown-item>
    <el-dropdown-item>Action 2</el-dropdown-item>
    <el-dropdown-item>Action 3</el-dropdown-item>
    <el-dropdown-item>
      <el-select v-model="selectData" @change="handleChange">
        <el-option value="1">Option 1</el-option>
        <el-option value="2">Option 2</el-option>
        <el-option value="3">Option 3</el-option>
      </el-select>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

这在你的脚本中

new Vue({
  data: {
    selectData: null
  },
  methods: {
    handleChange() {
      this.$nextTick(() => {
        this.$refs.dropdown.show();       
      });
    }
  }
}).$mount('#app')

Select 下拉菜单中的元素问题

Select element inside dropdown menu issue

vue.js

element-ui