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

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

需求

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

组件select-input

  1. <template>
  2.   <div>
  3.     <el-input v-model="inputData" placeholder=" " clearable @clear="clear">
  4.       <template #append>
  5.         <el-select v-model="selectData" placeholder=" " @change="change">
  6.           <el-option
  7.             v-for="(item, index) in option"
  8.             :key="index"
  9.             :label="item.label"
  10.             :value="item.value"
  11.           ></el-option>
  12.         </el-select>
  13.       </template>
  14.     </el-input>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  21.   props: {
  23.     option: {
  25.       type: Array,
  26.       default: [
  27.         {
  29.           label: "大于",
  30.           value: "大于",
  31.         },
  32.         {
  34.           label: "小于",
  35.           value: "小于",
  36.         },
  37.         {
  39.           label: "等于",
  40.           value: "等于",
  41.         },
  42.       ],
  43.     },
  44.     input: {
  46.       type: String,
  47.       default: "",
  48.     },
  49.     select: {
  51.       type: String,
  52.       default: "",
  53.     },
  54.   },
  55.   data() {
  57.     return {
  59.       selectData: "",
  60.       inputData: "",
  61.     }
  62.   },
  63.   watch: {
  65.     input: {
  67.       handler(val) {
  69.         this.inputData = val
  70.       },
  71.       immediate: true,
  72.       deep: true,
  73.     },
  74.     selectData: {
  76.       handler(val) {
  78.         this.selectData = val
  79.       },
  80.       immediate: true,
  81.       deep: true,
  82.     },
  83.   },
  84.   methods: {
  86.     change() {
  88.       this.$emit("update:input", this.inputData)
  89.       this.$emit("update:select", this.selectData)
  90.       this.$emit("change", this.inputData, this.selectData)
  91.     },
  92.     clear() {
  94.       this.$emit("update:input", "")
  95.       this.$emit("update:select", "")
  96.       this.$emit("change", "", "")
  97.     },
  98.   },
  99. }
  100. </script>
  101. <style lang="scss" scoped>
  102. :deep(.el-select) {
  104.   height: 100%;
  105.   .el-input__inner {
  107.     display: none;
  108.   }
  109.   .el-tooltip__trigger {
  111.     height: 100%;
  112.   }
  113.   .el-input__wrapper {
  115.     height: 100%;
  116.   }
  117.   .el-input--suffix {
  119.     height: 100%;
  120.   }
  121.   .el-input__suffix-inner > :first-child {
  123.     margin-left: 0;
  124.   }
  125. }
  126. :deep(.el-input) {
  128.   .el-input-group__append {
  130.     padding: 0 !important;
  131.     .el-select {
  133.       margin: 0 !important;
  134.     }
  135.   }
  136. }
  137. </style>

使用

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

发表评论

表情：
评论列表 （有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读