element plus el-select去空格
时间: 2024-08-15 12:10:40 浏览: 31
Element Plus 的 `el-select` 组件默认会保留用户输入的文本中的空格。如果你想要移除选中的值中的空格,可以在绑定 `value` 或者 `v-model` 的时候处理一下数据。这里提供一种简单的示例:
```html
<template>
<el-select v-model="selectedValue">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label.trim()" <!-- 这里添加 .trim() 函数去除空格 -->
:value="option.value.trim()"
></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '', // 初始化为空
options: [
{ value: '选项1', label: '带空格的选项1' },
{ value: '选项2', label: '带空格的选项2' },
]
};
}
};
</script>
```
在这个例子中,我们在 `label` 和 `value` 的 `v-bind` 属性上都添加了 `.trim()` 函数,这样当用户选择带空格的选项时,最终展示的值以及绑定到 `selectedValue` 的值都会去除空格。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)