Element Select 选择器
本示例以 Vue Element Admin 项目为基础,介绍 Element Select 选择器【远程搜索】
1、/src/views/select.vue
<template>
<div class="app-container">
<el-select
v-model="roleSelect.value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="roleSelect.loading"
>
<el-option v-for="item in roleSelect.options" :key="item.value" :label="item.label" :value="item"></el-option>
</el-select>
</div>
</template>
<script>
import { getRoles } from "@/api/select";
export default {
data() {
return {
roleSelect: {
options: [],
value: [],
list: [],
loading: false
},
listQuery: {
page: 1,
per_page: 50
}
};
},
mounted() {
this.getRoleList();
},
methods: {
remoteMethod(query) {
if (query !== "") {
this.roleSelect.loading = true;
setTimeout(() => {
this.roleSelect.loading = false;
this.roleSelect.options = this.roleSelect.list.filter(item => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.roleSelect.options = [];
}
},
async getRoleList() {
getRoles(this.listQuery)
.then(res => {
let mapData = res.data.items.map(item => {
return { value: item.role_code, label: item.role_name };
});
this.roleSelect.value = res.data.items[0].role_code; // 设置第一个值为选中状态
this.roleSelect.options = mapData;
this.roleSelect.list = mapData;
})
.catch(err => {
console.error(err);
});
}
}
};
</script>
2、/src/api/select.js
import request from '@/utils/request'
export function getRoles(query) {
return request({
url: '/v1/roles',
method: 'get',
params: query
})
}
3、服务端 API 接口返回 json 数据
{
"data": {
"items": [
{ "role_code": 1,"role_name": "超级管理员" },
{ "role_code": 2,"role_name": "管理员" },
{ "role_code": 3,"role_name": "普通用户" },
{ "role_code": 4,"role_name": "钻石" },
{ "role_code": 5,"role_name": "金牌" },
{ "role_code": 6,"role_name": "银牌" }
],
"total": 6,
"page_count": 1
},
"code": "200",
"msg": null
}
4、el-select 取值
var data = this.roleSelect.value
// 输出的是一个数组[1,2,3]
5、el-select 赋值
this.roleSelect.value = [1,2,3]
*
*
*