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

本文链接：https://blog.csdn.net/S_X_Han/article/details/141468304

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

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

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

组件功能概述

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

组件效果

在这里插入图片描述

数据请求格式

在这里插入图片描述

组件相关代码

<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: