<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);
}