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

```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)
          }
        }
      });
    },

```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值