Select 下拉选择器

filterable	是否可搜索
@change		选中值发生变化时触发
<div>
	<el-select 
		v-model="listQuery.aid" 
		size="mini" 
		filterable 
		placeholder="请选择代理商"
		@change="searchAgentChange">
		<el-option 
			:label="item.name" 
			:value="item.id" 
			v-for="(item,index) in agentList"
			:key="index">
		</el-option>
	</el-select>

	<el-select 
		v-model="listQuery.status" 
		size="mini" 
		filterable
		placeholder="请选择充值包状态">
		<el-option label="正常状态" :value="5"></el-option>
		<el-option label="禁用状态" :value="6"></el-option>
	</el-select>

	<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">搜索</el-button>
	<el-button type="danger" size="mini" icon="el-icon-refresh-right" style="margin-left:5px;" @click="delsearch">重置</el-button>
</div>

data() {
    
    
	return {
    
    
		agentList: [], // 代理数据
		listQuery: {
    
    
			page: 1,
			limit: 10,
			status: 5, // 正常
			aid: null, // 代理id
			accid: null, // 子代理id
		},
	}
},
created() {
    
    
	// 接口请求自行处理，获取到代理数据：agentList
},
methods: {
    
    
	// 搜索区代理切换，拿选中的id对agentList进行 筛选-赋值。
	searchAgentChange(e) {
    
    
		let arr = this.agentList.filter(item => {
    
    
			return item.id == e;
		})
		this.listQuery.aid = arr[0].id;
		this.listQuery.accid = arr[0].accid;
	},
	// 搜索
	searchList() {
    
    
		this.list = []
		this.totle = 0
		this.listQuery.page = 1
		this.getList(); // 接口请求数据
	},
	// 搜索重置
	delsearch() {
    
    
		this.listQuery = {
    
    
			page: 1,
			limit: 10,
			status: 5, // 正常
			aid: null,
			accid: null
		}
		this.getList()
	},
}