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

需求

用户输入数值，再选择下拉项，进行相应数据的筛选查询

组件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>