@frontend_worker/query-selector

《远程搜索+单选》组件区别于element-ui或iview组件库的select远程搜索， ①将头部显示的值和下拉选项显示的值独立开来， ②避免远程加载时头部默认值显示异常， ③支持插槽自定义

import querySelector from '@frontend_worker/query-selector/dist/querySelector'
import '@frontend_worker/query-selector/dist/styles/querySelector.css'

Vue.use(querySelector)

<QuerySelector
    style="width: 300px"
    v-model="formValidate.provice"
    :selected="selected"
    keyName="value"
    labelName="label"
    :remoteMethod="remoteMethod">
    <template v-slot:showSelected="{ selected }">
        <span :title="`${selected.value}-${selected.label}`">{{selected.value}}-{{selected.label}}</span>
    </template>
    <template v-slot:item="{ item }">
        <span :title="`${item.value}-${item.label}`">{{item.value}}-{{item.label}}</span>
    </template>
</QuerySelector>

const list = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut',
    'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',
    'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan',
    'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire',
    'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma',
    'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee',
    'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'
];
const optionList = list.map(item => {
    return {
        value: item,
        label: item
    };
});
// 模拟查询
import { getDataByKeyWords } from './test';
export default {
    data () {
        return {
            selected: {},
            formValidate: {
                provice: '',
            },
        };
    },
    created () {
        this.selected = {
            value: 'Alabama',
            label: 'Alabama'
        };
    },
    methods: {
        remoteMethod (query) {
            return new Promise(async(resolve,reject) => {
                try {
                    // 模拟查询
                    const res = await getDataByKeyWords({data: optionList, query});
                    resolve(res.data);
                } catch (err) {
                    resolve([]);
                }
            })
        }
    }
};

属性	说明	类型	默认值
clearable	是否添加清空功能	Boolean	true
disabled	是否禁用	Boolean	false
value/v-model	接收选中的值	null undefined Number String	''
placeholder	占位文本	String	'请输入'
transfer	是否把弹框插入body	Boolean	false
transferClassName	当transfer为true的时候给外层添加样式	String	'transfer-query-selector'
dropdownMenuClassName	DropdownMenu class名字，用来覆盖内部默认200px宽度	String	''
keyName	接收列表遍历key的名称	String	''
labelName	选中后默认显示在选中项位置展示，以及默认列表里显示的内容	String	''
selected	接收选中对象	Object	{}
remoteMethod	远程请求方法	Function