el-autocomplete 下拉选线添加一个固定按钮

最新推荐文章于 2024-06-05 17:04:13 发布

tyjlearning

最新推荐文章于 2024-06-05 17:04:13 发布

阅读量436

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/XujiRe/article/details/125413153

版权

文章展示了如何在Vue.js中使用<el-autocomplete>组件来创建一个自动补全搜索框，包括类名绑定、事件监听（如@blur、@select、@focus）以及自定义模板和数据处理方法querySearch，该方法处理模糊匹配并添加了添加新项的功能。

摘要由CSDN通过智能技术生成

<el-autocomplete
   class="voucher-subject-input"
   :ref="'inputcredit_2_'+index"
   :popper-append-to-body="true"
   popper-class="acc-search"
   :class="{ 'subject-opacity': voucher.items[index].showText }"
   v-model="voucher.items[index].subjectName"
   value-key="name"
   :fetch-suggestions="querySearch"
   :highlight-first-item="true"
   @blur="handleSelectBlur(voucher.items[index],index)"
   @select="handleSelectSubject($event,index)"
   @focus="handleFocusSubject($event,index)"
   >
  <template slot-scope="{ item }">
     <el-button
       v-if="item.is_add"
       type="primary" plain
       style="width: 100%;position: absolute;bottom: 0px;left: 0px;"
       class="add-button"
       @click="accAddBtn()"
       >
       添加
    </el-button>
 </template>
</el-autocomplete>

<style>
    /* 修改远程搜索框内容自适应 */
    .acc-search .el-scrollbar__wrap{
      padding-bottom: 40px;
    }
</style>

querySearch(queryStr, cb) {
                let t = this;
                queryStr = queryStr ? queryStr.trim() : "";
                let subjectList = t.subjectList;
                let rows = [];
                subjectList.forEach(item=>{
                    let asubName = item.asubName;
                    let asubCode = item.asubCode;
                    if (
                        asubName.indexOf(queryStr) != -1 ||
                        asubCode.indexOf(queryStr) != -1
                    ) {
                        item.value = asubCode + '   ' + asubName;
                        rows.push(item);
                    }
                });
                rows.push({is_add: true, value: '' });
                cb(rows);
            },