javascript 在vue中，是否将第一个匹配的值设为默认值(元素ui)？

7lrncoxx 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(121)

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

来源：https://stackoverflow.com/questions/77484254/make-first-matched-value-in-the-dropdown-as-default-in-vueelement-ui

1条答案

按热度按时间

vdzxcuhz1#

你可以这样做

<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"添加到您的allStates选项组。然后在true可见时将其设置为true
在ElementUI文档中，我看到它们有visible-change。因此，您可以将该事件挂钩并将enabled设置为$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));
      }
    }
  }

型
将默认enabled设置为true
您必须检查selectedState是否包含在commonStates中。如果true，请将enabled设置为false，并将其设置为nextTick中的true。
这里的Codepen：https://codepen.io/duckstery/pen/wvNrmMm

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 在vue中，是否将第一个匹配的值设为默认值(元素ui)？

1条答案

相关问题

热门标签

最新问答