el-input 下拉提示

 <el-table-column prop="name" label="请求名字" width="300">
  <template slot-scope="scope">
       <el-autocomplete
         popper-class="my-autocomplete"
         v-model="scope.row.name"
         :fetch-suggestions="querySearch"
         placeholder="请输入内容"
         @select="handleSelect">
         <i
           class="el-icon-edit el-input__icon"
           slot="suffix"
           @click="handleIconClick">
         </i>
         <template slot-scope="{ item }">
           <div class="name">{{ item.value }}</div>
         </template>
       </el-autocomplete>
  </template>
 </el-table-column>  
 
<el-table-column prop="ziduan" label="涉及字段" width="300">
     <template slot="header" slot-scope="scope">
     <el-tooltip class="item" effect="dark" placement="top">
     <div slot="content">多个字段用逗号隔开</div>
     <span>涉及字段<i class="el-icon-info"></i></span>
     </el-tooltip>
     </template>
        <template slot-scope="scope">
           <el-autocomplete
             popper-class="my-autocomplete"
             v-model="scope.row.ziduan"
             :fetch-suggestions="querySearch2"
             placeholder="请输入内容"
             @select="handleSelect">
             <i
               class="el-icon-edit el-input__icon"
               slot="suffix"
               @click="handleIconClick">
             </i>
             <template slot-scope="{ item }">
               <div class="name">{{ item.value }}</div>
             </template>
           </el-autocomplete>
     </template>
 </el-table-column>

mounted

 instance.get('/get_jmxtips/').then(res=>{
     this.oldtitle = res.data.oldtitle;
     this.oldziduan = res.data.oldziduan;
     this.oldziduanvalue = res.data.oldziduanvalue;
})

methods 

                  querySearch(queryString, cb) {
                    var oldtitle = this.oldtitle;
                    var results = oldtitle //queryString ? oldtitle.filter(this.createFilter(queryString)) : oldtitle;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                  },
                  querySearch2(queryString, cb) {
                    var oldziduan = this.oldziduan;
                    var results = oldziduan //queryString ? oldziduan.filter(this.createFilter(queryString)) : oldziduan;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                  },

                  querySearch3(queryString, cb) {
                    var oldziduanvalue = this.oldziduanvalue;
                    var results = oldziduanvalue //queryString ? oldziduanvalue.filter(this.createFilter(queryString)) : oldziduanvalue;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                  },
                  createFilter(queryString) {
                    return (restaurant) => {
                      return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                  },
                  handleSelect(item) {
                    console.log(item);
                  },
                  handleIconClick(ev) {
                    console.log(ev);

                  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值