?需求:
根據輸入的文本動態過濾選項列表,并在下方顯示匹配到的選項。當用戶勾選匹配到的選項時,把該選項的值賦值給輸入框中綁定的值。
?當用戶取消選擇時,輸入框中的字段可以隨意編輯。
組件: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];}
},