El-select具有多个和对象的值

发布于 2025-02-09 19:54:57 字数 1367 浏览 1 评论 0 原文

我在这里阅读了所有问题，似乎仍然不明白为什么我没有在标签中获得任何文字。

我正在使用a和一个对象作为值。当我关闭对话框并重新打开对话时，我所有的数据都会从后端获取并加载到组件内。仅我的多个选择中的标签没有显示文本。当我在Vue Devtools中检查它们时，它们具有正确的钥匙，但它们只是空了。

这是我的代码：

<el-select
 v-model="defaultFilter.val"
 value-key="value"
 multiple
 size="mini"
 filterable
 remote
 :placeholder="'Aktiv-/Passivfilter Wert für ' + obj.label"
 :remote-method="remoteMethod"
 :loading="configOptions.loading"
>
 <el-option-group v-for="group in configOptions.options" :key="group.label" :label="group.label">
   <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
      <span style="float: left">{{ item.label }}</span>
      <span v-if="item.description" style="padding-left: 5px; color: #8492a6; font-size: 9px">{{
                              item.description
                            }}</span>
    </el-option>
  </el-option-group>
</el-select>

我已经阅读了文档，只是不了解我在这里做错了什么。我传递给我的El-Option中的项目看起来像：

{
 description: "ABC",
 filterProp: "abc",
 label: "A B C",
 value: "ABC"
}

在选择中的标签中，我想显示值文本。我是否缺少一些配置或设置？

我正在使用“ element-ui”：“^2.13.2”， and “ vue”：“ 2.6.10”，

help> help或朝正确方向的指针将非常感谢。

原文

I have read through all the questions here and still can't seem to understand why I am not getting any text in my tags.

I am using a and an object for the value of the . When I close my dialog and reopen it, all my data is fetched from the backend and loaded inside the component. Just the tags in my multiple select are not showing the text. They have the right key, when I inspect them within the vue devtools, but they just show up empty.

Here is my code:

<el-select
 v-model="defaultFilter.val"
 value-key="value"
 multiple
 size="mini"
 filterable
 remote
 :placeholder="'Aktiv-/Passivfilter Wert für ' + obj.label"
 :remote-method="remoteMethod"
 :loading="configOptions.loading"
>
 <el-option-group v-for="group in configOptions.options" :key="group.label" :label="group.label">
   <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
      <span style="float: left">{{ item.label }}</span>
      <span v-if="item.description" style="padding-left: 5px; color: #8492a6; font-size: 9px">{{
                              item.description
                            }}</span>
    </el-option>
  </el-option-group>
</el-select>

I have read through the documentation and just don't understand what I am doing wrong here. The item I am passing to value in my el-option looks like this:

{
 description: "ABC",
 filterProp: "abc",
 label: "A B C",
 value: "ABC"
}

In my tags inside the select, I want to show the value text. Am I missing some config or setting?

I am using "element-ui": "^2.13.2", and "vue": "2.6.10",

Help or a pointer in the right direction would be greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滿滿的愛 2025-02-16 19:54:57

问题不在您共享的代码中。您的方法或数据可能有问题。
我会在这里猜测，因为您没有共享完整的代码。

如果您使用数据遵循他们的文档，那么您可能会因为有各种各样的对象而陷入困境，并且它们具有一系列字符串。
这就是来自他们的示例的，您需要的是 item.value 和 item.label 而不是 item ：

mounted() {
  this.list = this.states.map(item => {
    // here you need item.value and item.label
    return { value: `value:${item}`, label: `label:${item}` };
  });
}

但这只是一个示例，在这里您可能会从API中获取数据，因此您需要检查如何检查该数据是结构化的。

这是您的数据的完整示例 https://codepen.io/jakob_/jakob_/jakob_/pen/pen/grxmqqqn

Problem is not in code you shared. Probably something is wrong in your methods or data.
And I will guess here because you didn't share full code.

If you followed their documentation with your data then you probably stuck because you have array of objects and they have array of strings.
That is this part from their example and what you need is item.value and item.label instead of item:

mounted() {
  this.list = this.states.map(item => {
    // here you need item.value and item.label
    return { value: `value:${item}`, label: `label:${item}` };
  });
}

But this is just an example and here you probably get data from API so you need to check how that data is structured.

Here is full working example with your data https://codepen.io/jakob_/pen/GRxMQQN

回复收藏 0 原文

~没有更多了~