基于element的自定义组件实现前端自定义sql查询条件（改良版）

最新推荐文章于 2024-09-02 10:21:44 发布
最新推荐文章于 2024-09-02 10:21:44 发布
阅读量695 收藏 10
点赞数 22
分类专栏： vue 文章标签： 前端 javascript vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_X_Han/article/details/141468304
版权

此篇文章是对基于element的自定义组件实现前端自定义sql查询条件的优化改良版，优化后版本使用更简单，无需在父组件内创建方法处理数据变动

自定义输入选择框组件 (InputSelect.vue)

此组件实现了一个自定义的输入选择框，允许用户选择一个条件类型并通过输入框输入对应的值。组件可以被多个实例化，并且所有的实例都会更新同一个数组对象，该数组对象在父组件中通过 v-model 进行双向绑定。

组件功能概述

  1. 条件选择：通过下拉菜单选择条件类型。
  2. 值输入：根据选择的条件类型，在输入框中输入对应的值。
  3. 禁用输入：对于某些条件类型（如 isNull），输入框会被禁用。
  4. 动态更新：当条件类型或值发生变化时，自动更新父组件中的数组对象。

组件效果

在这里插入图片描述

数据请求格式

在这里插入图片描述

组件相关代码

<template>
  <div>
    <el-input placeholder="请输入"
              v-model="columnValue"
              class="input-with-select"
              clearable
              :disabled="disabledType.includes(columnType)"
              @input="updateItem">
      <el-select slot="prepend"
                 placeholder="请选择"
                 style="width: 110px"
                 clearable
                 v-model="columnType"
                 @change="updateItem">
        <el-option-group v-for="group in options"
                         :key="group.label">
          <el-option v-for="item in group.options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
    </el-input>
  </div>
</template>

<script>
/**
 * *****使用方法*****
 *
 * 在父组件中添加引用。columnName为查询的字段，v-model为父组件中绑定的变量
 *
 * <input-select columnName="status" v-model="queryParams.items" />
 *
 */
export default {
  name: 'InputSelect',
  props: {
    value: {
      type: Array,
      required: true,
      default: [],
    },
    columnName: {
      type: String,
      required: true,
      default: null,
    }
  },
  data() {
    return {
      options: [
        {label: 'e', options: [{value: 'eq', label: '精确匹配'}, {value: 'notEq', label: '不匹配'}]},
        {label: 'l', options: [{value: 'like', label: '包含'}, {value: 'notLike', label: '不包含'}]},
        {label: 'll', options: [{value: 'left', label: '开头是'}, {value: 'right', label: '结尾是'}]},
        {label: 'n', options: [{value: 'isNull', label: '为空'}, {value: 'notNull', label: '不为空'}]},
        {label: 'b', options: [{value: 'isBlank', label: '空文本'}, {value: 'notBlank', label: '非空文本'}]}
      ],
      disabledType: ['isNull', 'notNull', 'isBlank', 'notBlank'],
      columnType: 'eq',
      columnValue: ''
    }
  },
  watch: {
    value: {
      handler(newItems) {
        // 当items发生变化时，更新内部的状态
        const foundItem = newItems.find(item => item.columnName === this.columnName);
        if (foundItem) {
          this.columnType = foundItem.columnType;
          this.columnValue = foundItem.columnValue;
        } else {
          this.columnType = 'eq';
          this.columnValue = '';
        }
      },
      deep: true
    }
  },
  methods: {
    updateItem() {
      if (this.disabledType.includes(this.columnType)) {
        this.columnValue = '';
      }
      const updateItems = [...this.value]
      // 更新单个项的信息
      const item = {columnName: this.columnName, columnValue: this.columnValue, columnType: this.columnType};

      // 移除已存在的相同属性名称的项
      const existingItemIndex = updateItems.findIndex(i => i.columnName === this.columnName);
      if (existingItemIndex > -1) {
        updateItems.splice(existingItemIndex, 1);
      }

      // 检查是否所有必需的属性都有值
      if (item.columnName && item.columnType && (item.columnValue || this.disabledType.includes(item.columnType))) {
        // 添加新的项
        updateItems.push(item);
      }
      this.$emit('input', updateItems);
    }
  }
}
</script>
<style scoped>
</style>

后端逻辑可参考（以mybatis为例）

 <if test="query.items!= null and query.items.size() > 0">
   <foreach collection="query.items" separator="AND" item="condition">
	    <choose>
	        <!-- 精确匹配 -->
	        <when test="condition.columnType == 'eq'">
	            AND ${condition.columnName} = #{condition.columnValue}
	        </when>
	        <!-- 不匹配 -->
	        <when test="condition.columnType == 'notEq'">
	            AND ${condition.columnName} != #{condition.columnValue}
	        </when>
	        <!-- 包含 -->
	        <when test="condition.columnType == 'like'">
	            AND ${condition.columnName} LIKE CONCAT('%', #{condition.columnValue}, '%')
	        </when>
	        <!-- 不包含 -->
	        <when test="condition.columnType == 'notLike'">
	            AND ${condition.columnName} NOT LIKE CONCAT('%', #{condition.columnValue}, '%')
	        </when>
	        <!-- 开头是 -->
	        <when test="condition.columnType == 'left'">
	            AND ${condition.columnName} LIKE CONCAT(#{condition.columnValue}, '%')
	        </when>
	        <!-- 结尾是 -->
	        <when test="condition.columnType == 'right'">
	            AND ${condition.columnName} LIKE CONCAT('%', #{condition.columnValue})
	        </when>
	        <!-- 为空 -->
	        <when test="condition.columnType == 'isNull'">
	            AND ${condition.columnName} IS NULL
	        </when>
	        <!-- 不为空 -->
	        <when test="condition.columnType == 'notNull'">
	            AND ${condition.columnName} IS NOT NULL
	        </when>
	        <!-- 空文本 -->
	        <when test="condition.columnType == 'isBlank'">
	            AND (${condition.columnName} = '' OR ${columnName} IS NULL)
	        </when>
	        <!-- 非空文本 -->
	        <when test="condition.columnType  == 'notBlank'">
	            AND (${condition.columnName} != '' AND ${columnName} IS NOT NULL)
	        </when>
	        <!-- 其他情况 -->
	        <otherwise>
	            <!-- 处理未匹配到的情况，通常为空或报错 -->
	        </otherwise>
	    </choose>
    </foreach>
</if>

HTML 结构

  • el-input：主输入框，用于输入值。
  • el-select：条件选择器，用于选择条件类型。
  • el-option-group 和 el-option：用于组织和展示条件选项。
 <div>
    <el-input placeholder="请输入"
              v-model="columnValue"
              class="input-with-select"
              clearable
              :disabled="disabledType.includes(columnType)"
              @input="updateItem">
      <el-select slot="prepend"
                 placeholder="请选择"
                 style="width: 110px"
                 clearable
                 v-model="columnType"
                 @change="updateItem">
        <el-option-group v-for="group in options"
                         :key="group.label">
          <el-option v-for="item in group.options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
    </el-input>
  </div>

JavaScript 逻辑

  • props：接收父组件传入的数组 value 和列名 columnName。
  • data：存储组件内部状态，包括条件类型、值以及条件选项。
  • watch：监听 value 的变化，更新组件内部状态。
  • methods：
    • updateItem：当条件类型或值发生变化时，更新父组件中的数组对象。
export default {
  name: 'InputSelect',
  props: {
    value: {
      type: Array,
      required: true,
      default: [],
    },
    columnName: {
      type: String,
      required: true,
      default: null,
    }
  },
  data() {
    return {
      options: [
        {label: 'e', options: [{value: 'eq', label: '精确匹配'}, {value: 'notEq', label: '不匹配'}]},
        {label: 'l', options: [{value: 'like', label: '包含'}, {value: 'notLike', label: '不包含'}]},
        {label: 'll', options: [{value: 'left', label: '开头是'}, {value: 'right', label: '结尾是'}]},
        {label: 'n', options: [{value: 'isNull', label: '为空'}, {value: 'notNull', label: '不为空'}]},
        {label: 'b', options: [{value: 'isBlank', label: '空文本'}, {value: 'notBlank', label: '非空文本'}]}
      ],
      disabledType: ['isNull', 'notNull', 'isBlank', 'notBlank'],
      columnType: 'eq',
      columnValue: ''
    }
  },
  watch: {
    value: {
      handler(newItems) {
        // 当items发生变化时，更新内部的状态
        const foundItem = newItems.find(item => item.columnName === this.columnName);
        if (foundItem) {
          this.columnType = foundItem.columnType;
          this.columnValue = foundItem.columnValue;
        } else {
          this.columnType = 'eq';
          this.columnValue = '';
        }
      },
      deep: true
    }
  },
  methods: {
    updateItem() {
      if (this.disabledType.includes(this.columnType)) {
        this.columnValue = '';
      }
      const updateItems = [...this.value]
      // 更新单个项的信息
      const item = {columnName: this.columnName, columnValue: this.columnValue, columnType: this.columnType};

      // 移除已存在的相同属性名称的项
      const existingItemIndex = updateItems.findIndex(i => i.columnName === this.columnName);
      if (existingItemIndex > -1) {
        updateItems.splice(existingItemIndex, 1);
      }

      // 检查是否所有必需的属性都有值
      if (item.columnName && item.columnType && (item.columnValue || this.disabledType.includes(item.columnType))) {
        // 添加新的项
        updateItems.push(item);
      }
      this.$emit('input', updateItems);
    }
  }
}

使用示例

在父组件中，你可以像下面这样使用这个组件：

假设我们需要一个用于搜索备注和状态字段的输入选择组件，我们可以这样使用：

 <el-form :model="queryParams" ref="queryForm" v-show="showSearch" inline>
      <el-form-item label="备注" prop="items">
        <input-select columnName="remark" v-model="queryParams.items"/>
      </el-form-item>
      <el-form-item label="状态" prop="items">
        <input-select columnName="status" v-model="queryParams.items" />
      </el-form-item>
      <el-form-item class="queryBtn">
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

总结

这个组件允许用户通过选择条件类型和输入值来构建查询条件，并且可以被多个实例化，所有的实例都会更新同一个数组对象。这使得在前端构建复杂的查询条件变得更加简单和直观。

FanHua_繁花
关注
  • 22
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试总结三
我是谁的博客
10-26 1052
离线资源 前端兼容 CSS3 GPU加速 SPDY协议 单页面应用 GZIP压缩 CSS表达式和CSS滤镜 HTTP长连接、短连接 安全 重点： 类 安全、csrf、xss Vue原理 vuex vue-router的两种模式及区别 webpack是什么，用过什么 ...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_54854317的博客
03-03 765
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
基于element的自定义组件实现前端自定义sql查询条件
S_X_Han的博客
08-21 439
是一个结合了输入框 (el-input) 和下拉选择框 (el-select) 的复合组件。用户可以先选择一个条件类型，然后输入相应的值。这个组件特别适合用于表单中的高级搜索或过滤场景。通过上述步骤，我们可以轻松地在 Vue.js 应用中集成组件，从而提高表单的交互性和功能性。希望这篇分享能帮助到正在寻找类似解决方案的开发者们！
WEB前端面试题
lf_refuel的博客
03-03 7406
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolu..
前端面试笔记随笔---kalrry
kalrry
04-05 9052
面试笔记---kalrry第一部分：HTML5+CSS31、父元素和子元素宽高不固定，如何实现水平垂直居中2、分别实现骰子中的'一点' 和 '三点' 的布局。3、简述选择器~和+的区别。4、简述box-sizing的有效值以及所对应的盒模型规则。**5、flex中元素的margin是否会合并？**6、简述align-items和align-content的区别。7、简述data:属性的用法（如何设置，如何获取），有何优势？8、简述 title与h1的区别，b与strong的区别，i与em的区别。9、什么是标
如何拿到9家大厂的前端校招offer
前端达人
09-06 814
关注前端达人，与你共同进步本文由 杨珏成 首发于掘金，未经许可请勿转载原文链接：https://juejin.im/post/5d70ff205188253e4b2f0...
横扫9家大厂前端校招offer，全文14560字，阅读需80分钟
frontend_frank的博客
09-06 807
本文由 杨珏成 首发于掘金，未经许可请勿转载原文链接：https://juejin.im/post/5d70ff205188253e4b2f07bd0x00 作者是谁我...
那些年我准备的前端面试题
热门推荐
高山上的鱼
08-07 1万+
commonJS相关： (1)在commonJS规范中，require,exports,module，__filename,__dirname都是通过动态编译后添加到模块的头部的，这样就不存在全局变量污染的问题   但是他们传入的require,exports,module都是一个空对象。而且必须弄清楚一点：exports是一个对象，如果重新赋值，那么不会反映到外面，但是module.expo
北理大佬是如何拿到 9 家大厂的前端 offer （附面试题和典型思路）
前端下午茶
09-06 1767
本文由 杨珏成 首发于掘金，未经许可请勿转载原文链接：https://juejin.im/post/5d70ff205188253e4b2f07bd0x00 作者是谁...
element-ui组件table实现自定义筛选功能的示例代码
10-17
在本文中，我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库，它提供了各种各样的UI组件，以帮助开发者快速构建高质量的Web界面。其中，table组件是...
自定义注解实现拦截sql.rar
10-08
本示例中，“自定义注解实现拦截SQL”是关于如何通过注解来动态修改执行的SQL语句，以在其中增加特定的条件。这个功能在数据库操作中特别有用，比如在MyBatisPlus框架中，可以用来实现灵活的数据过滤或者权限控制。 ...
Element-ui tree组件自定义节点使用方法代码详解
10-18
Element UI是饿了么前端团队推出的一款基于Vue 2.0的桌面端组件库，它提供了一系列可复用的组件，用于快速构建富有交互性的Web界面。Tree组件是Element UI中的一个重要组件，它以树形结构展示信息，常用于文件目录...
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
基于vue2和element-ui实现的自定义分页表格组件
06-11
这个资源是一个基于vue2和element-ui实现的自定义分页表格组件，是将element-ui的表格组件和分页组件封装成了一个组件，可以指定接口地址，快速实现分页表格的渲染，减少前端代码的编写。使用的技术：vue2.6.14、...
前端的面试题
本人小可爱
08-30 763
【代码】前端的面试题。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1692
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
js对象操作常用方法
最新发布
m0_75276704的博客
09-02 496
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 420
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值