iview + vue 实现标签页搜索框并且封装成组件

最新推荐文章于 2023-11-15 16:05:20 发布
最新推荐文章于 2023-11-15 16:05:20 发布
阅读量794 收藏 1
点赞数
分类专栏： vue iview 封装搜索栏组件 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39098810/article/details/108337252
版权

效果如下

标签类型有4种

1.输入框

2.下拉框

3.选择日期区间

4.选择单个时间

.

点击更多显示其他可搜索条件，选中后显示，可点击×，删除该搜索条件

 

每天吃肉肉
关注
专栏目录
iview+vue 管理系统 表格搜索框写法
A123ppleQueen的博客
10-28 463
搜索框里有很多数据，下拉那种 1.<template>里写<select>,用select的option选项占位。 2.搞数据 在data return命名一个变量，根据需要写类型，假设他是一个数组，然后用v-for去循环取值。
vue后端框架mysql_Vue+ElementUI+.netcore前后端分离框架开发项目实战
weixin_30356603的博客
01-19 834
原文：https://blog.csdn.net/vM199zkg3Y7150u5/article/details/102550228框架采用.NET Core + Vue前后端分离，并且支持前端、后台代码业务动态扩展，框架内置了一套有着20多种属性配置的代码生成器，可灵活配置生成的代码，代码生成器界面配置完成即可生成单表(主表)的增、删、改、查、导入、导出、上传、审核基础功能。只需要简单了解即可...
vue实现多条件和模糊搜索功能
10-16
主要为大家详细介绍了vue实现多条件和模糊搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【iview】如何设计一个可以搜索的菜单列表
lvdou1120101985的博客
10-27 2378
  一、场景         最近在做的某系统，菜单非常多，系统本身业务比较多，再加上十好几张报表，导致整个菜单列表非常长，用户在找的时候非常的不方便，于是便想着给菜单列表加上搜索功能，先瞧一下效果，从左到右分别是：未搜索，搜索，折叠                          二、实现思路 MenuList设置成计算属性，根据搜索框的值过滤菜单列表，实现思路是比较简单的，但是有一...
iview+page封装+强制刷新
浩星
09-26 1005
前言： iview的page封装，缺点无法固定页码按钮数量，而且current的页面恢复选中第一个实现不了，这里动态写了强制刷新的方法 下面是组件cpage.vue <template> <Page v-if="showPage" :class-name='className' :total="tota...
Vue组件定制——动态查询规则生成组件
weixin_49847526的博客
04-24 4381
1. 动态查询规则 动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现SQL查询的where条件，下面是摘自mongodb的某一软件。 2.组件构建思路 按照规则组件的组织形式，可以把其视为一棵树，有树干和树叶，这样看起来就不难了。 2.1 组件html 这里采用ElementUI构建，因此可以方便的组合各类ui控件来进行构建需要的界面。 当然该组件既然被看作树，因此其也是个递归组件，因此还涉及到自己调用自己。 <template> <d
管理系统系列--vue后端管理系统界面 基于ui组件iview.zip
02-25
【标题】"管理系统系列--vue后端管理系统界面 基于ui组件iview.zip" 提供的是一个基于Vue.js框架的后端管理系统的界面实现，它利用了流行的UI组件库iView。Vue.js是一个轻量级、高性能的前端JavaScript框架，广泛...
vue2+vue3
weixin_43460646的博客
11-15 984
本博客主要为coderwhy的Vue2网课 + 尚硅谷Vue2+Vue3网课，所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马、尚硅谷老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！
iview封装实现高效列表管理功能
最后，从标签和文件列表中我们可以看出，`iview`是描述这个封装list组件所使用的UI框架，而`comTableList`则是这个自定义组件的名称。 综合以上信息，可以得出在iview框架下，如何通过封装组件来实现一个包含分页、...
vue组件列表
lb812383331的专栏
07-08 1647
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/airyland/vux" Vux 基于Vue和WeUI的组件库 https://github.com/ElemeFE/mint-ui" mint-ui Vue 2的移动UI元素 https://github.com/iview/iview" iview 基于 Vuejs 的开源 UI 组件库 https...
基于vue 的标签组件
09-14
基于vue 封装的标签组件。可以实现标签的动态新增，双击可以修改，还可以删除
vue+iview+select二次封装，搜索，多选等功能封装
浩星
09-20 2188
前言： 对iview的select下拉进行二次封装,基本上常用的参数和方法里面都有 下拉组件：cselect.vue <template> <Select v-model="sel_val" :clearable="clearable" :label-in-value="labelAndVal" :element...
vue中基于iview封装支持搜索选中的Tree组件
苏苏就是小苏苏的博客
07-11 2322
vue中基于iview封装支持搜索选中的Tree组件
iview-select-tree树型选择器组件封装
weixin_42235173的博客
07-16 1649
iview-select-tree树型选择器组件封装 实现效果： 二级单选，二级多选（新建与编辑） 具体效果： 1、数据手风琴样式显示，默认第一组数据展开 2、每次只能选择同一组数据，选择不同组数据时原来被选择的数据清除 3、编辑时只用传一组数据，因为不能选择不同组数据 4、编辑时原先被选中的数据不能被删除，只能新增同组下的其他数据 数据格式： // treeData: flag - 新建或编辑； title，value必填，name必须没有； // children里面的name，title必填，val
vue+iview框架前端页面实现搜索
氵冫、的博客
07-17 1145
搜索
Vue-搜索框实现
热爱编程 热爱生活
10-22 9818
一.方法分析 1.字符串匹配 2.v-for循环实时更新元素 3.@click=""实现点击后页面的跳转同时设置不同id来根据内容的不同来跳转到不同页面 二.代码分析： html代码: 1.设置v-model绑定元素内容 2.goPage(data.id) 写一个函数来根据id不同跳转界面 <div class="container" id="div1"> <div class="search bar1"> <form> ..
博客使用方法
justwaityou1314的博客
06-09 1851
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue3标签页切换组件封装类似el-tabs
九段刀客的博客
10-29 2177
vue3标签页切换组件开发
vxe-table：一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等）
热门推荐
前端探险家的博客
05-13 9万+
开门见山看效果图，看是不是你想要的 vxe-table（先来看看这个强大组件是什么样子） 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等… git地址：vxe-table. vxe-table组件地址：点击查看发现新大陆，建议收藏，留着备用. 组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！ 但是呢，既然分享这个组件啦，
使用iview + Vue从0到1实现前端读取excel表格并渲染到界面
最新发布
10-29
在Vue.js中使用iView框架和vue-excel-import插件可以方便地实现前端读取Excel文件的功能，并将其数据渲染到页面上。以下是简单的步骤： 1. **安装依赖**: - 首先需要安装`vue-excel-import`库，它是一个轻量级的Excel导入组件。你可以通过npm或yarn进行安装： ``` npm install vue-excel-import iview axios # 或者 yarn add vue-excel-import iview axios ``` 2. **引入所需模块**: 在`main.js`或单文件组件的顶部，引入所需的组件和样式： ```javascript import { ElButton } from 'iview'; import ExcelReader from 'vue-excel-import'; import 'iview/dist/styles/iview.css'; import 'vue-excel-import/dist/vue-excel-import.css'; ``` 3. **配置Vue应用**: 在Vue实例的`mounted`生命周期钩子里，初始化Excel Reader组件并指定上传文件的方法： ```html <template> <div> <el-button @click="handleFileUpload">选择Excel文件</el-button> <ExcelReader ref="excelReader" :on-success="handleSuccess" :on-error="handleError"></ExcelReader> </div> </template> <script> export default { components: { ExcelReader, }, methods: { handleFileUpload() { this.$refs.excelReader.open(); }, // 接收解析后的数据 handleSubmit(file) { this.$refs.excelReader.submit(file); }, // 成功回调处理数据 handleSuccess(data) { const parsedData = data.records; // 解析的数据数组 this.renderToTable(parsedData); // 将数据渲染到表格或其他UI元素 }, // 错误回调处理错误信息 handleError(error) { console.error('Error:', error); }, renderToTable(data) { // 根据数据结构创建表格或使用iview的table组件 // 示例： this.tableData = data.map(row => ({ ...row, })); }, }, }; </script> ``` 4. **渲染数据**: `handleSuccess`函数接收的是一个包含所有行的对象数组，你需要将这个数组转换为你希望展示的格式，然后在`renderToTable`方法中，将数据赋值给Vue组件的data属性，比如`<el-table>`。 5. **显示结果**: 现在你应该能看到一个表单按钮，点击后可以选择Excel文件。文件成功导入后，数据会被渲染到已设定好的`<el-table>`或者其他UI元素中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值