在 vue（element ui）中将下拉列表中的第一个匹配值设置为默认值？-解网

问：

Framework used: Vue and Element UI

任务：将第一个匹配值显示为默认值。

问题：如果从普通州中选择了德克萨斯州，则在打开下拉列表时会从所有州部分显示德克萨斯州（两者都应选择，因为两者都具有相同的值，这是正确的，工作是完全正确的）。

方法：当值存在于常见状态中时，我试图隐藏所有状态列表，但这不是预期的结果。

预期结果：如果选择了德克萨斯州并且处于共同状态，我想在打开下拉列表时将其显示为默认值（在共同状态部分而不是所有状态部分）。可以这样做吗？

链接到 Codepen：https://codepen.io/limbe_me/pen/BaMwRNz

样板：

<template>
  <div>
    <el-select v-model="selectedState" placeholder="Select a state">
      <el-option-group label="common states">
        <el-option
          v-for="item in commonStates"
          :label="item"
          :key="item + '_common'"
          :value="item"
        ></el-option>
      </el-option-group>
      <el-option-group label="all states">
        <el-option
          v-for="item in allStates"
          :label="item"
          :key="item + '_all'"
          :value="item"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedState: "",
      commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
      allStates: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        ".....",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ]
    };
  },
  methods: {
    // Your methods go here
  }
};
</script>

javascript vue.js 下拉菜单前端元素 UI

<template>
  <div>
    <el-select v-model="selectedState" placeholder="Select a state" @visible-change="change">
      <el-option-group label="common states">
        <el-option
          v-for="item in commonStates"
          :label="item"
          :key="item + '_common'"
          :value="item"
        ></el-option>
      </el-option-group>
      <el-option-group v-if="enabled" label="all states">
        <el-option
          v-for="item in allStates"
          :label="item"
          :key="item + '_all'"
          :value="item"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      enabled: false,
      selectedState: "",
      commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
      allStates: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        ".....",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ]
    };
  },
  methods: {
    // Your methods go here
    change(isVisible) {
      this.enabled = isVisible
    }
  }
};
</script>

<style>
.app {
  color: black;
}
</style>

添加到您的选项组。然后在下拉列表可见时设置它v-if="enabled"allStatestrue

在文件中，我看到他们有.因此，您可以挂接该事件并将其设置为ElementUIvisible-changeenabled$event

这里是 Codepen：https://codepen.io/duckstery/pen/QWYqOQo

对于您的扩展请求，我已经调整了我的代码

  data() {
    return {
      enabled: true,
      selectedState: "",
      commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
      allStates: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        ".....",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ]
    };
  },
  methods: {
    // Your methods go here
    change(isVisible) {
      if (this.commonStates.includes(this.selectedState)) {
        this.enabled = false;
        this.$nextTick(() => (this.enabled = true));
      }
    }
  }

将 default 设置为enabledtrue

您必须检查是否包含在中。如果，设置为并将其设置为selectedStatecommonStatestrueenabledfalsetruenextTick

这里是 Codepen：https://codepen.io/duckstery/pen/wvNrmMm

它在一定程度上解决了问题，但又出现了另一个问题。例如，在start（selectedState： “Alabama”）时选择了一个不常见的州，例如“Alabama”。它不会向下滚动到其选定的选项，而是显示常见状态列表，然后仅显示所有状态的列表（您可以在列表中的某处找到所选状态）。

0赞 duckstery 11/15/2023

我已经编辑了答案以满足您的需要

0赞 ChrisLimbe 11/16/2023

像魅力一样工作。谢谢

上一个：为什么 DropDownButton 在 Flutter 中不起作用？

下一个：当我将鼠标悬停在项目列表下方时，如何停止打开下拉菜单