element-plus input组件+select组件实现输入加选择

野性酷女 2024-04-01 18:50 97阅读 0赞

### 需求 ###

用户输入数值，再选择下拉项，进行相应数据的筛选查询  
![在这里插入图片描述][79a73a8631d74fd0abf1dde7699633fc.png]

### 组件select-input ###

<template>
      <div>
        <el-input v-model="inputData" placeholder=" " clearable @clear="clear">
          <template #append>
            <el-select v-model="selectData" placeholder=" " @change="change">
              <el-option
                v-for="(item, index) in option"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-input>
      </div>
    </template>
    
    <script>
    export default {
          
      props: {
          
        option: {
          
          type: Array,
          default: [
            {
          
              label: "大于",
              value: "大于",
            },
            {
          
              label: "小于",
              value: "小于",
            },
            {
          
              label: "等于",
              value: "等于",
            },
          ],
        },
        input: {
          
          type: String,
          default: "",
        },
        select: {
          
          type: String,
          default: "",
        },
      },
      data() {
          
        return {
          
          selectData: "",
          inputData: "",
        }
      },
      watch: {
          
        input: {
          
          handler(val) {
          
            this.inputData = val
          },
          immediate: true,
          deep: true,
        },
        selectData: {
          
          handler(val) {
          
            this.selectData = val
          },
          immediate: true,
          deep: true,
        },
      },
      methods: {
          
        change() {
          
          this.$emit("update:input", this.inputData)
          this.$emit("update:select", this.selectData)
          this.$emit("change", this.inputData, this.selectData)
        },
        clear() {
          
          this.$emit("update:input", "")
          this.$emit("update:select", "")
          this.$emit("change", "", "")
        },
      },
    }
    </script>
    <style lang="scss" scoped>
    :deep(.el-select) {
          
      height: 100%;
      .el-input__inner {
          
        display: none;
      }
      .el-tooltip__trigger {
          
        height: 100%;
      }
      .el-input__wrapper {
          
        height: 100%;
      }
      .el-input--suffix {
          
        height: 100%;
      }
      .el-input__suffix-inner > :first-child {
          
        margin-left: 0;
      }
    }
    :deep(.el-input) {
          
      .el-input-group__append {
          
        padding: 0 !important;
        .el-select {
          
          margin: 0 !important;
        }
      }
    }
    </style>

### 使用 ###

<select-input v-model:input="input" v-model:select="select" @change="change"></select-input>

[79a73a8631d74fd0abf1dde7699633fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/45e83935456e48c0b8a4f9033be8d410.png