console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<script src="https://static.360buyimg.com/pops/xstoreom/plugins/vue/vue.min.js">
</script>
<script src="https://static.360buyimg.com/pops/xstoreom/fresh/fresh.min.js">
</script>
<link href="https://static.360buyimg.com/pops/xstoreom/fresh/styles/fresh.min.css" rel="stylesheet" />
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
<p-row>
<p-col span="12" style="padding-right:10px">
</p-col>
<p-col span="12">
<p-select :model="model14" :label="label" multiple filterable remote :remote-method="remoteMethod2" :loading="loading2"><p-option v-for="option in options2" :value="option.value" :key="new Date()">{{option.label}}</p-option></p-select>
</p-col>
</p-row>
<script>
new Vue({
el:"body",
data:function() {
return {
model14: [1,2],
label:["a","b"],
loading2: false,
list: [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}],
options2: []
}
},
methods: {
remoteMethod2:function (query) {
if (query !== '') {
this.loading2 = true;
setTimeout(function(){
this.loading2 = false;
var list = this.list.map(function(item){
return {
value: item.id,
label: item.name
};
});
this.options2=[];
this.$nextTick(function(){
this.options2 = list.filter(function(item){ return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1});
})
}.bind(this), 200);
} else {
this.options2 = [];
}
}
}
});
</script>
</body>
</html>