输入框过滤选项列表,el-checkbox-group单选

 需求：

根据输入的文本动态过滤选项列表，并在下方显示匹配到的选项。当用户勾选匹配到的选项时，把该选项的值赋值给输入框中绑定的值。

 当用户取消选择时，输入框中的字段可以随意编辑。

组件：el-input、el-checkbox-group、el-checkbox

<el-form-item label="测试一下"><el-inputv-model="selectedValue"placeholder="请输入内容"@input="onInputChange"></el-input><divv-if="filteredOptions.length > 0"style="border: 1px solid #e7eaec;padding: 10px;border-radius: 10px;background: #fff;"><el-checkbox-group v-model="checked" @change="onCheckboxChange"><div v-for="(item, index) in filteredOptions" :key="index"><el-checkbox :label="item.value">{{item.label}}</el-checkbox></div></el-checkbox-group></div>
</el-form-item>
options: [{ label: "选项一", value: "选项一" },{ label: "选项二", value: "选项二" },{ label: "选项三", value: "选项三" },
],
selectedValue:'',
filteredOptions: [],
checked: [],onInputChange(value) {if (value == "") {this.filteredOptions = [];this.checked = [];return;}this.filteredOptions = this.options.filter((item) => item.label.includes(value) || item.value.includes(value));if (this.filteredOptions.length === 0) {this.checked = [];}
},onCheckboxChange(value) {if (value.length > 1) {this.checked = [value[value.length - 1]];}if (this.checked.length > 0) {this.selectedValue = this.checked[0];}
},