select-search 带搜索的下拉组件（李新星）

基础用法

模糊搜索：

模糊搜索（联想）：

精确搜索

<template>
  <div>
    <p>模糊搜索：</p>
    <select-search
			style="margin-bottom: 20px"
			:selectWidth="'100px'"
			:pageSize="5"
			:placeholder="'测试数据'"
			:width="'200px'"
			:resultKeys="resultKeys"
			:typeList="typeList"
			:searchResult="searchResult"
			:accurate="false"
			@enterEvents="enterEvents2"
		></select-search>
		<p>模糊搜索（联想）：</p>
    <select-search
			style="margin-bottom: 20px"
			:selectWidth="'100px'"
			:pageSize="5"
			:placeholder="'测试数据'"
			:width="'200px'"
			:resultKeys="resultKeys"
			:typeList="typeList"
			:searchResult="searchResult"
			:accurate="false"
			:autocomplete="true"
			@remote-method="remoteMethod"
			@enterEvents="enterEvents2"
		></select-search>
    <p>精确搜索</p>
    <select-search
			style="margin-bottom: 20px"
			:selectWidth="'100px'"
			:pageSize="5"
			:placeholder="'测试数据'"
			:width="'200px'"
			:resultKeys="resultKeys"
			:typeList="typeList"
			:searchResult="searchResult"
			:accurate="true"
			@remote-method="remoteMethod"
			@enterEvents="enterEvents2"
		></select-search>
  </div>
</template>

<script>
export default {
  data() {
    return {
			/* 模糊搜索组件start */
			typeList: [
				{ label: 'TypeId', value: 'TypeId' },
				{ label: '功能集名称', value: '功能集名称' }
			],
			typeList2: [{ label: '功能集名称', value: '功能集名称' }],
			resultKeys: ['leftVal', 'rightVal'],
			searchResult: {
				leftVal: 'leftVal',
				rightVal: ''
			},
			/* 模糊搜索组件end */
    }
  },
  methods: {
    remoteMethod(pageNum, keyWord, cb) {
			cb(
				[
					{ label: '测试1', value: '测试1' },
					{ label: '测试2', value: '测试2' }
				],
				-1
			) // 下拉数据；总页数
		},
    enterEvents2(chooseVal) {
			console.log('chooseVal', chooseVal)
		},
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
selectWidth	搜索类型显示宽度	string	—	100px
pageSize	精确搜索时默认做多显示的条数	Number	—	5
placeholder	输入框/下拉框提示语	string	—	请输入关键词
width	组件宽度	string	—	100px
resultKeys	长度为2的数组，下拉选项key；输入框key	array	—	—
typeList	下拉选项	array	—	—
searchResult	组件绑定值	object	—	—
accurate	搜索类型（精确/模糊）	boolean	—	true
autocomplete	搜索类型（模糊-联想功能）	boolean	—	false，只在accurate为false时生效

Events

方法名	说明	参数
remote-method	精确搜索时可以分页查询数据（滚动触发）	{ pageNum<页码，传-1不分页>, keyWord<搜索关键字>, cb<回调，向组件传值> }
enterEvents	回车触发事件	—