vue的多选框搜索

最新推荐文章于 2022-07-12 15:29:41 发布

清北_

最新推荐文章于 2022-07-12 15:29:41 发布

阅读量830

点赞数

本文链接：https://blog.youkuaiyun.com/programmer188/article/details/113737461

版权

这篇博客展示了如何在Vue中创建一个用于选择行为类型的表单元素。利用`el-form-item`、`el-checkbox-group`和`el-checkbox`组件，用户可以方便地从预定义的类型选项如'刷抖音'、'吃饭'、'睡觉'中进行选择。通过`getTypeData`函数获取并填充这些类型数据，实现动态配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item label="行为类型" prop="type" class="checkbox-type">
  <el-checkbox-group v-model="queryParams.types" size="medium">
    <el-checkbox v-for="item in typeOptions" :key="item.type" :label="item.type">{{ item.name }}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

getTypeData() {
  allTradeType().then(response => {
    this.typeOptions = response.data
  })
},

去查表吧,表字段type,name

type	name
1	刷抖音
2	吃饭
3	睡觉

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

清北_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

elementUl的el-checkbox和el-select用法

吴小花的博客

11-24

3185

效果：需求：所有APP用户和指定分组用户可同时选。分组用户可以多选。难点：当选择了分组后，自动勾选指定分组用户，删除了分组后，指定分组用户取消勾选。遇到的问题：一开始，我把el-select组件放在了el-checkbox里面，删除多选的分组后，总会影响el-checkbox的勾选，很难实现想要的效果。解决方案： el-select放到el-checkbox外，慢慢实现了想要的效果。...

vue实现多种复选框，含搜索

12-08

vue实现多种复选框，含搜索

参与评论您还未登录，请先登录后发表或查看评论

VUE - 搜索多选下拉框组件

Max's Note

04-25

7455

VUE - 搜索多选下拉框组件 Max.Bai 2020-04 记录一个多选搜索下拉框组件功能： 1. 支持搜索， 2. 多选， 3. 重新搜索依旧保留已选的选项 ElementUI 组件文档 https://element.eleme.cn/2.12/#/zh-CN/component/select 效果源码： <template> <...

在vue中的form表单中下拉框中的数据来自数据库查询到的数据

日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导

03-31

7375

1、前端代码需要注意的部分：prop后边是表单中的字段 v-model:绑定的数据 <el-form-item label="上架时间" required> <el-col :span="11"> <el-form-item prop="date"> <el-date-picker type="date" placeholder="选择日期" v-model="rule

el-select 多选实现全选以及搜索可全选操作

weixin_46923775的博客

01-29

2926

做这个也是因为测试反馈说一个一个选择实在是很头疼，顾做了次功能，不说啦，直接看代码吧。 1.下拉 <el-form-item label="选择国家:" prop="site_id"> <el-select v-model="formData.site_id" filterable clearable multiple

vue.js实现含搜索的多种复选框（附源码）

10-20

在这个给定文件的上下文中，我们将会了解到如何使用Vue.js来实现一个带有搜索功能的多种复选框组件。这个组件不仅提供了一个可搜索的复选框列表，还允许用户根据搜索条件快速筛选出需要的选项。这样的组件在很多应用...

vue 多选框 全选

m0_37684037的博客

01-06

1293

<template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> // 全选按钮的部分 <Checkbox // value来判断是否点亮全选框 :val...

vue.js实现单选框、复选框和下拉框示例

10-19

复选框的工作原理与单选框类似，但区别在于复选框允许多个选项同时被选中。在HTML中，复选框通过`type="checkbox"`来创建： ```html <label for="Jack">jack <label for="Bob">bob <label for="Alice">alice ```...

Vue Element 分组+多选+可搜索Select选择器实现示例

10-18

主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

element ui 多个el-checkbox多选框用法

qq_38502227的博客

11-13

6331

效果图： <div class="permissions-information-content" v-for="(data, index) in newJurisdictionData" :key="data.id" > <el-checkbox :label="data.code" @change="checkAllChildren($event, data, ind

element ui dropdown下拉复选框+全选+搜索功能组件 (开箱即食)

酱子

07-12

7895

dropdown下拉复选框+全选+搜索功能组件可以传入默认值默认选中可以全选可以搜索点击确定把选中的值抛出

vue计算属性实现模糊查询及其它复杂操作

xy19950125的博客

12-09

1085

前几天遇到一个问题就是模糊查询一般的逻辑模糊查询大部分是通过后台的接口然后返回数据但是呢这次是后台把所有数据都返回来给你然后前端自己实现刚开始的时候感觉也没有什么 element组件自带的有但是后来发现有很多的坑牵扯到选择就一下子变得有点头疼了这里面同时涉及到左边选择后点击加号按钮然后出现在右边同时左边的消除掉同理左边的选择后点击减号自动去除同时...

vue中el-checkbox全选、反选、多选

qq_45268602的博客

02-18

8834

实现一组数据的全选、反选、多选操作

vue实现多选框(复选框)

weixin_47084532的博客

04-17

1万+

<template> <table class="t1"> <tr class="tr1"> <td> <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>全选 .

vue实现简单搜索功能

最新发布

01-09

### Vue3 中实现多选框与搜索框结合使用在Vue3中，为了使多选框和搜索框能够协同工作并提供更好的用户体验，可以利用Vue的数据绑定特性和事件处理机制。下面是一个简单的例子，展示如何在一个Vue3应用程序中集成这两个组件。 #### HTML 和 CSS 基础结构首先，创建基本的HTML标记以及一些必要的CSS样式来设置页面布局[^1]： ```html <div id="app"> <input type="text" v-model="searchQuery" placeholder="Search..." /> <ul> <li v-for="(item, index) in filteredItems" :key="index"> <label> <input type="checkbox" v-model="selectedItems" :value="item.id"/> {{ item.name }} </label> </li> </ul> </div> ``` 对于上述代码片段中的`<style>`部分，可以根据实际需求调整列表项和其他UI元素的设计风格。 #### JavaScript 部分 (Vue3) 接下来，在脚本标签内初始化一个新的Vue实例，并定义相应的逻辑以支持过滤显示选项和支持多项选择的功能: ```javascript const { createApp } = Vue; createApp({ data() { return { items: [ {id: '0', name:'Option A'}, {id: '1', name:'Option B'}, {id: '2', name:'Option C'} ], searchQuery: '', selectedItems: [] } }, computed: { filteredItems(){ const queryLowercased = this.searchQuery.toLowerCase(); return this.items.filter(item => item.name.toLowerCase().includes(queryLowercased)); } } }).mount('#app'); ``` 这段代码实现了两个主要特性：一是通过监听输入框的变化动态更新可见条目；二是允许用户勾选多个复选框并将所选项存储起来。 #### 进一步优化建议为了让此功能更加完善，还可以考虑加入更多高级特性，比如但不限于： - 添加清除按钮以便快速清空当前查询条件； - 对已选中的项目做视觉上的区分提示； - 当没有任何匹配结果时给出友好提示信息等。