iview中带搜索功能的select选择

一、select搜索功能

        在使用iview中select的时候，在选择的值的数组确定的时候，如果选择项过多，则需要添加搜索功能。这个功能iview已经帮我们封装好了，可以看iview文档。

例：我们有一个userList：  

那么我们的select的写法为：

<Select style="width:100px">

    <Option v-for="item in userList"  :value="item.userId" :key="item.userId">

            {{item.userName}}

    </Option>

</Select>

得到的效果为

加入搜索功能，只需要在select上加入filterable即可。

二、select的远程搜索功能

      如果我们选择人员的时候，在上面的列表中没有，而是存在另一个列表中，或者在数据库的另一个表中，我们就需要使用宣城搜索功能。在官方文档中远程搜索功能的描述如下：

而它给的例子是一个一维数组的远程搜索，和我们的需求不符，但是我们依旧可以借鉴这种方法。

首先我们有另一个数组

可能我们所需要的数据是在这个里面的，那么就要用到远程搜索功能。

html：

js:

页面显示效果为：

，我们输入字符后：

我们选择'may'后可以看到我们绑定的userId的输出为：

，但是我们想保存到数据库中的是userId而不是userName，这时就需要用到label属性：

html：

再选择时候就可以看到我们这里显示的为userName，但是绑定的userId为userId，则满足我们的需求。