<q-select outlined :options="CompanyCodeOptions" v-model="submitData.CompanyCodes" label="公司代码" dense clearable hint="请选择公司代码" filled emit-value map-options use-input input-debounce="0" :multiple="true" :hide-selected="true" :max-values="50" @filter="filterCompanyCode" :value="submitData.CompanyCodes"></q-select> 在文本框里输入的值会消失
时间: 2023-11-11 09:44:41 浏览: 67
在Quasar的QSelect组件中,输入框中的值会在过滤选项时被重置。这是QSelect组件的默认行为,以便更好地适应选项的过滤。
如果你希望在输入框中保留用户输入的值,可以通过使用 `:use-input.sync` 属性来实现。
下面是修改后的代码示例:
```vue
<template>
<div>
<q-select
outlined
:options="CompanyCodeOptions"
v-model="submitData.CompanyCodes"
label="公司代码"
dense
clearable
hint="请选择公司代码"
filled
emit-value
map-options
:use-input.sync="useInput"
input-debounce="0"
:multiple="true"
:hide-selected="true"
:max-values="50"
@filter="filterCompanyCode"
:value="submitData.CompanyCodes"
></q-select>
</div>
</template>
<script>
export default {
data() {
return {
CompanyCodeOptions: [
// 选项列表...
],
submitData: {
CompanyCodes: [] // 存储选中的值
},
useInput: true // 控制是否使用输入框的值
};
},
methods: {
filterCompanyCode(val, update) {
// 过滤方法的实现...
}
}
};
</script>
```
在上面的代码中,我们添加了一个名为 `useInput` 的响应式数据,并将其绑定到 `:use-input.sync` 属性上。通过设置 `useInput` 的值为 `true`,我们告诉QSelect组件在过滤选项时保留用户输入的值。
通过这种方式,你可以在输入框中保留用户输入的值。
希望这个解决方案对你有所帮助!如果还有其他问题,请随时提问。
阅读全文