vue3 模糊搜索 不区分大小写 多选框 element plus

发布时间 2023-09-26 13:31:36作者: yxxcl

```javascript
<div class="select-part" ref="selectRef">
<div class="check-type">
<input type="text" class="check-type-title" :placeholder="placeholder" @focus="onFocus" @blur="onBlur"
v-model="inputValue" @input="handleInput(inputValue)">

<div class="check-type-checkbox" v-if="facilitiesFlag">
<div style="max-height: 246px; overflow: auto;">
<el-checkbox-group v-model="sensorTopValues" @change="changeEvent(sensorTopValues)">
<el-checkbox :label="item.sensor_type" v-for="item in inputNewList" class="check-type-checkbox-item"
:class="{ 'checkChange': item.checked }" :title="item.sensor_name"
style="width: 210px; height: 27px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
{{ item.sensor_name }}
</el-checkbox>
</el-checkbox-group>
</div>

</div>
</div>
</div>

<script>
data() {
return {
/* input */
placeholder: '请输入传感器类型',
inputValue: '',
inputList: [],
inputNewList: [],
}

methods: {
handleClickOutside(event) {
let divElement = this.$refs.selectRef // 获取你想要排除的div元素的引用
if (divElement && !divElement.contains(event.target)) {
this.facilitiesFlag = false;
}
},

handleInput(val) {
this.inputNewList = this.inputList.filter(item => item.sensor_name.toLowerCase().indexOf(val.toLowerCase()) > -1);
},

onFocus() {
this.facilitiesFlag = true,
this.inputList = this.allSensorInfoList,
this.inputNewList = this.inputList
},

/* 点击下拉框 */
changeEvent(values) {
{
this.facilitiesFlag = true
let newValue = Object.values(values).join(',');
this.getSensorMap(newValue)
}
},

getSensorType() {
sensorType().then((res) => {
if (res.code === 200) {
this.allSensorInfoList = res.data
if (this.allSensorInfoList[0].sensor_name) {
this.placeholder = this.allSensorInfoList[0].sensor_name
this.sensorTopValues = this.allSensorInfoList[0].sensor_type
this.getSensorMap(this.sensorTopValues)
}
}
});
},

```