下拉框里既能输入内容新增,又能下拉选择,还能检索

 

 

 方法一:使用allow-create属性即可通过在输入框中输入文字来创建新的条目

<el-form-item label="采购方式" prop="lngpurchasemodeid">

            <bl-select

              v-model="dialogForm.lngpurchasemodeid"

              :options="purchasemodeList"

              :props="{

                value:'lngpurchasemodeid',

                label: 'strpurchasemodename'

              }"

              allow-create

            />

          </el-form-item>

方法二:

<el-form-item label="采购方式" prop="lngpurchasemodeid">

            <el-popover

              v-model="visible"

              placement="bottom"

              width="250"

              trigger="manual"

            >

              <ul class="purchase scrollbarStyle">

                <li v-for="item in purchasemodeList" :key="item.lngpurchasemodeid" value="item.lngpurchasemodeid" @click="purchaseFn(item)">{{ item.strpurchasemodename }}</li>

              </ul>

              <el-input

                slot="reference"

                v-model="dialogForm.strpurchasemodename"

                @focus="purchaseFocus"

                @blur="visible = !visible"

                @input="filterFn"

              />

            </el-popover>

          </el-form-item>

methods:{

purchaseFn(item) {

      this.dialogForm.lngpurchasemodeid = item.lngpurchasemodeid

      this.dialogForm.strpurchasemodename = item.strpurchasemodename

      this.visible = false

    },

    filterFn(val) {

      this.purchasemodeList = this.copyOptionList.filter((item) => {

        return PinyinMatch.match(item.strpurchasemodename, val) // (需要过滤的名称，输入的关键词)

      })

    },

    purchaseFocus() {

      this.visible = !this.visible

      this.purchasemodeList = this.copyOptionList

    }

}