前端 高级筛选器

最新推荐文章于 2024-06-02 15:25:55 发布
最新推荐文章于 2024-06-02 15:25:55 发布
阅读量677 收藏 2
点赞数 2
文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41225297/article/details/131430225
版权

高级筛选器，支持文本和日期类型判断，支持级联字段选择，多用于大数据筛选！ 

 

 

 前端代码，主要是通过递归的方式实现

    <el-main style="padding: 10px">
      <el-row>
        <el-row class="child">
          <el-button
            size="small"
            type="primary"
            plain
            icon="el-icon-circle-plus-outline"
            @click='addRule()'
          >新增规则</el-button>
          <el-button
            size="small"
            type="primary"
            plain
            icon="el-icon-circle-plus-outline"
            @click="addRuleList()"
          >新增规则组</el-button>
        </el-row>

        <template v-for="(item, index) in conditionVlueList.list">
          <el-row
            :key="'condition' + index"
            class="child"
            v-if="item.type == 'condition'"
          >
            <el-select
              class="newSeclect"
              v-model="item.concat"
              size="small"
              placeholder="请选择"
            >
              <el-option
                label="and"
                value="and"
              > </el-option>
              <el-option
                label="or"
                value="or"
              > </el-option>
            </el-select>
            <el-cascader
              v-model="item.codeCasder"
              class="codeSeclect"
              filterable
              v-show="caseCarderShow == true"
              :options="codeOptions"
              :show-all-levels="false"
              size="small"
              @change="changeCodeOption(item)"
            ></el-cascader>
            <el-select
              v-show="caseCarderShow == false"
              v-model="item.code"
              placeholder="请选择"
              class="codeSeclect"
              size="small"
              filterable
              @change="changeSelectOption(item)"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.fieldName"
                :label="item.fieldCaptionByname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="item.inputLabel"
              placeholder="请选择"
              class="codeSeclect"
              size="small"
              v-show=false
            >
              <el-option
                v-for="item in codeOptions"
                :key="item.fieldCaption"
                :label="item.fieldCaption"
                :value="item.fieldCaption"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="item.fileter"
              size="small"
              placeholder="请选择"
              class="filterSelect"
            >
              <el-option
                v-for="item in filterList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="item.inputValue"
              v-show="item.codeType !== 'datetime'"
              size="small"
              class="inputSelect"
              placeholder="请输入规则"
            ></el-input>
            <el-date-picker
              v-show="item.codeType == 'datetime'"
              v-model="item.inputValue"
              class="inputSelect"
              type="date"
              size="small"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <i
              @click="parDelete(item,index)"
              size="mini"
              type="danger"
              style="margin-left:10px"
              class="el-icon-delete deleIcon"
            ></i>
          </el-row>
          <el-row
            v-if="item.type == 'group' && item.list.length > 0"
            :key="'group' + index"
            class="child"
          >
            <createChild
              :conditionVlueList="item"
              :codeOptions="codeOptions"
              :filterList="filterList"
              :caseCarderShow="caseCarderShow"
              :selectOptions="selectOptions"
            ></createChild>
          </el-row>
        </template>
      </el-row>
      <el-button
        v-show="saveButton == true"
        @click="save"
        type="primary"
        class="saveButton"
      >保存</el-button>
      <el-button
        v-show="saveButton == false"
        @click="save"
        type="success"
        icon="el-icon-edit"
        size="small"
        plain
        class="getButton"
      >保存</el-button>
    </el-main>

 递归函数，并且判断数据源是否为sqlServer，对拼接字段进行特殊处理

    // 递归将数组转为字符串
    foreachArr(arr) {
      let sql = ''
      let newCode = ''
      for (let i = 0; i < arr.length; i++) {
        if (this.isSqlServer == 'sqlserver') {
          newCode = '[' + arr[i].code + ']'
        }
        else {
          newCode = arr[i].code
        }
        // 判断是否为规则组
        if (arr[i].type == 'group' && arr[i].list.length > 0) {
          sql = sql + ' ' + arr[i].concat + ' (' + this.foreachArr(arr[i].list) + ') '
        }
        else if (arr[i].concat == '') {
          if (arr[i].codeType == 'DateTime' || arr[i].codeType == 'String' || arr[i].codeType == 'Date') {
            sql = sql + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
          else {
            sql = sql + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
        }
        else if (arr[i].type == 'condition') {
          // 判断是否为日期
          if (arr[i].codeType == 'DateTime' || arr[i].codeType == 'String' || arr[i].codeType == 'Date') {
            sql = sql + ' ' + arr[i].concat + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
          else {
            sql = sql + ' ' + arr[i].concat + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
        }
      }
      return sql
    },

保存进行传参 

    save() {
      // 数组插入key
      if (this.conditionVlueList.list.length > 0) {
        this.conditionVlueList.list[0].concat = ''
        this.sqlCode = ' and ' + '(' + this.foreachArr(this.conditionVlueList.list) + ')'
        this.sqlZh = this.foreachArrZh(this.conditionVlueList.list)
      }
      else {
        this.sqlCode = ''
        this.sqlZh = ''
      }
      this.$emit("saveFilter", this.conditionVlueList.list, this.sqlCode, this.sqlZh);
    },

Vue.js 实战：创建一个实用的高级筛选页面（含代码与完整解说） 初学者指南：使用 Vue.js 搭建带筛选功能的现代化高级筛选页面 Vue.js 项目实践：从零构建高级筛选系统（附代码与详细教程）
南北极之间
11-05 504
在这篇文章中，我们将使用 Vue.js 构建一个功能全面的高级筛选页面。本教程适合新手朋友，通过这篇教程，您将学会如何创建选项卡切换、筛选条件选择、取消和确认按钮等功能。首先，我们将创建一个 HTML 文件，设置好基本的 HTML 框架，并引入 Vue.js 库。 创建 HTML 结构 在 中添加页面的结构，包括标题栏、选项卡区域、筛选条件区域。 设置 CSS 样式 在 标签中添加 CSS，以确保页面看起来和图片中的样式一致。 定义 Vue 数据与方法 在 标签中，定义 Vue 的数据和方法。 实现功
基于JavaScript实现前端数据多条件筛选功能
11-29
有时候也会需要在前端进行数据筛选，增强交互体验。当数据可用的筛选条件较多时，把逻辑写死会给后期维护带来很大麻烦。下面是我自己写的一个简单的筛选器，筛选条件可以根据数据包含的字段动态设置。 仿照京东的筛选条件，这里就取价格区间和品牌作为测试。 代码 代码中主要使用js的过滤器Array.prototype.filter，该方法会对数组元素进行遍历检查，返回一个符合检查条件的新数组，不会改变原数组。 // filter() var foo = [0,1,2,3,4,5,6,7,8,9]; var foo1 = foo.filter( function(item) { return ite
angularJS——高级筛选
zhangyufeng0126的博客
10-19 520
angularJS——高级筛选 1.效果图 2.前台代码 <ons-scroller class="hlyw-bg-seek" ng-class="{'isIOStop':isIOS}"> <div class="hlyw-filtrate-bt">分公司</div> <div class="h...
高级选择器前端
weixin_43268298的博客
09-02 107
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*并集选择器，选择器通过逗号分隔*/ h1,div{ color: gold; } /*后代选择器 影响所有符合选择器删选的后代*/ /*div p{ color: red; }*/
前端入门——高级选择器
qq_44213733的博客
09-25 92
多条件筛选前端插件
08-10
类似京东等多条件筛选的前端插件，采用原生css和jquery，git地址：https://github.com/tylhjy/filterMulti
vue实现前端列表多条件筛选
01-18
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码，供大家参考，具体内容如下 1、先上图： 2、搜索条件绑定的数据是： filterForm:{ schoolName:'',//输入的学校名称 position:'',//选择的区域区域 ...
打造你的专属Vue组件：超实用“高级筛选弹窗组件“实战
小猿同学628的博客
06-01 930
在现代前端开发中，组件化思想是提高开发效率、维护性和代码复用性的关键。本文将通过一个实例——创建一个自定义的“高级筛选”弹窗组件，来展示如何在Vue框架下利用Composition API和Element Plus构建功能丰富且易于集成的UI组件。下面的代码示例不仅展示了组件的结构、样式定制，还涉及了事件处理和属性传递，是一个全面的组件开发教程。
前端高级选择器相关介绍
LisnmX的博客
04-22 176
系列文章目录 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、高级选择器 二、伪类选择器 三、背景、阴影、圆角边框 一、高级选择器 1、后代选择器 选择父元素中的子元素 代码示例： <style> ul li{ color:pink; font-size:16px; } <style> <ul> <li>好想快点解封</li> </ul> 注意：元素1属于父类
前端的选择器
WaNgLu:)的博客
08-13 886
常用的选择器 元素选择器 作用：通过元素选择器，可以选中页面中所有指定的元素 语法：标签名{ } 例如：为页面中所有的p元素，设置一个字体颜色 p{ color :red; } id选择器 作用：用过元素的id属性值选中唯一的一个元素 语法：#id属性值{ } 例如：为id属性值为p1的元素设置一个字体颜色 #p1{ color :red; } 类选择器 作用：通过元素...
前端选择器
weixin_43183295的博客
05-29 530
昨日内容回顾: 前端HTML 超文本标记语言 注释 <!--单行注释--> <!-- 多行注释 --> ps:写HTML的时候，注释一般都是成双成对的 即 <!--xx功能开始--> <!--xx功能结束--> 文件的后缀名 head内常用标签(不是给用户看的) title 定义网页标题 style 内部写css样式代码 lin...
【前端】基于layui写的一个高级搜索（筛选）功能
热门推荐
qq_42007423的博客
03-26 1万+
基于layui写的一个高级搜索（筛选）功能。 效果图： 是一位萌新，所有写的有点儿乱。（放在上面，供新手们参考，也是自己做一个记录。） 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g...
前端 高级条件检索 +ant-d pro
weixin_47338877的博客
11-11 942
这里写自定义目录标题 import type { Key } from 'react'; import { useState, useEffect } from 'react'; import type { ProColumns } from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; import { getMaintainList } from '@/services/preservation/archi
利用VUE组件实现高级列表筛选
weixin_65984842的博客
03-03 900
项目需要，适用于后台管理系统，当列表数据过多可引入本组件使用
全：前端数据筛选
weixin_44500533的博客
03-20 1849
allTagChange(checked) { //'全部'被选中 if (this.selectedTags.length == 0 || checked) { this.allTagStatus = true; this.selectedTags = []; this.getIndexInfo(); thi...
vue3 写一个高级搜索的组件
weixin_42602736的博客
05-25 1372
以上是在 Vue3 中创建一个简单的高级搜索组件的基本步骤。根据表单字段的类型定义相应的表单组件，在组件中输入绑定和事件响应逻辑。在 Vue3 项目中，可以通过单文件组件的方式创建一个高级搜索组件，例如在。在父组件中定义高级搜索表单的字段配置和表单值，通过。方法来处理表单的提交动作。事件将表单值作为参数传递出去。属性用来定义表单字段的配置，循环渲染每个表单字段，使用。标签动态加载相应的表单组件。属性用来定义表单的默认值。指令绑定表单值，使用。当表单被提交时，会触发。双向绑定表单值，通过。
一个vue3的高级筛选器UI组件，支持字符串、数字、下拉、级联、区域、日期、时间等多种数据类型的筛选
06-02 855
一个vue3的高级筛选器UI组件，支持字符串、数字、下拉、级联、区域、日期、时间等多种数据类型的筛选，支持条件的分组设置，可以通过使用逻辑运算符（AND/OR）组合多个条件。一个通过用户界面轻松生成任何类型的查询语句，使得筛选和过滤数据变得轻而易举。提供多种UI界面，赋能不同的业务场景。下载地址请关注底部微信公众号联系客服。下载地址请关注底部微信公众号联系客服。
Vue前端的封装的高级搜索条件，like,=,or,and,not null,in,not in,between..and后端进行统一的接收
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
05-17 3556
文章目录1.点击高级搜索按钮出现弹框2.出现弹框的页面，通过js封装好相关的下拉条的条件2.1 弹框代码2.2 细节 在高级搜索弹框页面点击新增 需要控制高级搜索的首个条例不可以编辑 ,新增按钮方法3.条件代码4.高级搜索的保存代码后端代码接收1. controller1.1它的封装的搜索的类1.2封装的排序的类2. serviceimpl 实现层3.mapper层4.xml文件前端的全部代码注意后端的接收高级搜索的条件 1.点击高级搜索按钮出现弹框 <!-- 操作按钮 -->
前端使用js实现多个种类筛选
weixin_53726009的博客
02-28 2189
以上展示了uniapp项目中实现多个种类的筛选，可根据具体需求，对代码进行相关调整和优化
那前端的高级筛选Search解释一下
最新发布
12-13
前端的高级筛选（Advanced Search）是指在用户界面上提供一组复杂的过滤条件，允许用户通过多条件的组合来精确地查找所需的数据。高级筛选通常包括多个输入框、下拉菜单、日期选择器、复选框等控件，用户可以根据需要选择或输入不同的条件来进行搜索。 高级筛选的实现通常涉及以下几个步骤： 1. **用户界面设计**：设计一个用户友好的界面，包含各种筛选控件，如文本框、下拉菜单、日期选择器等。 2. **数据处理**：在用户提交筛选条件后，前端需要将条件转换为后端可识别的格式，通常是JSON或URL参数。 3. **与后端交互**：通过AJAX或Fetch API将筛选条件发送到后端，后端根据条件进行数据查询，并将结果返回给前端。 4. **结果显示**：前端接收到后端返回的数据后，将其展示在界面上，通常以列表或表格的形式呈现。 以下是一个简单的示例代码，展示了如何使用JavaScript和HTML实现一个基本的高级筛选功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高级筛选示例</title> <style> /* 简单的样式 */ .filter-container { margin-bottom: 20px; } .filter-container input, .filter-container select { margin-right: 10px; } </style> </head> <body> <h1>高级筛选示例</h1> <div class="filter-container"> <input type="text" id="name" placeholder="姓名"> <select id="gender"> <option value="">性别</option> <option value="male">男</option> <option value="female">女</option> </select> <input type="date" id="startDate" placeholder="开始日期"> <input type="date" id="endDate" placeholder="结束日期"> <button onclick="search()">搜索</button> </div> <div id="results"></div> <script> function search() { const name = document.getElementById('name').value; const gender = document.getElementById('gender').value; const startDate = document.getElementById('startDate').value; const endDate = document.getElementById('endDate').value; const filters = { name: name, gender: gender, startDate: startDate, endDate: endDate }; // 模拟与后端交互 fetch('/search', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(filters) }) .then(response => response.json()) .then(data => { displayResults(data); }) .catch(error => console.error('Error:', error)); } function displayResults(data) { const resultsDiv = document.getElementById('results'); resultsDiv.innerHTML = ''; data.forEach(item => { const div = document.createElement('div'); div.textContent = `Name: ${item.name}, Gender: ${item.gender}, Date: ${item.date}`; resultsDiv.appendChild(div); }); } </script> </body> </html> ``` 在这个示例中，用户可以通过姓名、性别和日期范围进行筛选，点击搜索按钮后，前端将筛选条件发送到后端，并展示返回的结果。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值