首页 > 其他分享 >vue3 模糊搜索 不区分大小写 多选框 element plus

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

时间:2023-09-26 13:33:05浏览次数:39  
标签:name inputList element item allSensorInfoList plus divElement vue3 sensor

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

```

标签:name,inputList,element,item,allSensorInfoList,plus,divElement,vue3,sensor
From: https://www.cnblogs.com/yxxcl51/p/17729892.html

相关文章

  • Vue3 组件基础:轻松掌握前端开发新技能!
    基本实例这里有一个Vue组件的示例://创建一个Vue应用constapp=Vue.createApp({})//定义一个名为button-counter的新全局组件app.component('button-counter',{data(){return{count:0}},template:`<button@click="count++">......
  • Vue3-vite 按需引入Element-plus
    1.下载unplugin-vue-components,unplugin-auto-import包npmi-Dunplugin-vue-componentsunplugin-auto-import2.vite.config.js文件中配置1importAutoImportfrom'unplugin-auto-import/vite'2importComponentsfrom'unplugin-vue-components/vite�......
  • Mybatis-Plus 系列:简介和基本使用
    目录一、简介二、特性三、基本使用1、初始化数据库2、初始化工程3、精简SpringBoot相关日志一、简介官网:https://www.baomidou.comMyBatis-Plus是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,主要作用为简化开发、提高效率。二、特性无侵入:只做增强不做改......
  • 如何在vite+vue3中的html页面中使用变量?
    如何在vite+vue3中的html页面中使用变量?vite版本:4.1.5vue版本:3.2.47需要引入新的开发依赖:yarnaddvite-plugin-html-D修改vite.config.ts文件配置...//@ts-ignoreimport{createHtmlPlugin}from"vite-plugin-html";exportdefault({mode}:ConfigEnv):Us......
  • 使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
    目录1、前言2、分析3、实现4、踩坑4.1、拖拽辅助线的坑4.2、数据的坑4.3、限制拖拽4.4、样式调整1、前言最近在做一个文件夹管理的功能,要实现一个树状的文件夹面板。里面包含两种元素,文件夹以及文件。交互要求如下:创建、删除,重命名文件夹和文件可以拖拽,拖拽文件到文件夹中,或......
  • Vue3 基础 – 快速上手 & 常用指令
    1.在HTML网页中使用vue3的3个基本步骤a.通过 script 标签的 src 属性,在当前网页中全局引入vue3的脚本文件:<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>b.创建vue3的单页面应用程序实例://2.1从Vue对象中解构出createApp函数const{cre......
  • 【ElementUI】ElementUI Tooltip 根据内容判断是否显示、文字提示自定义样式
    【ElementUI】ElementUITooltip根据内容判断是否显示、文字提示自定义样式封装组件自定义内容<template><spanv-if="['',null,undefined].indexOf(content)===-1"><el-tooltip:content="content"effect="light"placement="bot......
  • 使用SpringBoot+Vue3的形式实现管理系统的添加功能
    1、查看页面形式2、使用element-plus组件为添加页面引入form表单成功引入form表单组件:3、更改成自己需要的形式4、测试是否可以拿到文本框的数据拿到数据啦!!(记得vue3这里:console.log(form)//不要写this```)#5、vue界面的添加代码<el-form-item>......
  • Vue-进阶:路由及elementUI组合开发
    Vue-router路由什么是vue-router?服务端路由指的是服务器根据用户访问的URL路径返回不同的响应结果。当我们在一个传统的服务端渲染的web应用中点击一个链接时,浏览器会从服务端获得全新的HTML,然后重新加载整个页面。然而,在单页面应用中,客户端的JavaScript可以拦截页面的......
  • Vue3 事件处理实战:让你的代码更有魅力
    监听事件我们可以使用 v-on 指令(通常缩写为 @ 符号)来监听DOM事件,并在触发事件时执行一些JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"例如:<divid="basic-event"><button@click="counter+=1">Add1</button>&......