在前端开发中，我们经常使用第三方库来提高开发效率和代码质量。其中比较流行的一个 UI 组件库是 element-ui。但是，element-ui 并不支持一些特殊的功能，比如联想搜索和级联选择器等。而 npm 包 element-ui-iamp 则提供了这些功能的拓展，本文将详细介绍该 npm 包的使用方法。
安装
在项目文件夹下使用如下命令安装 element-ui-iamp：
npm install element-ui-iamp --save
使用
在页面组件中引入 element-ui 和 element-ui-iamp 的 CSS 文件：
<head> <!-- 引入 element-ui 样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入 element-ui-iamp 样式 --> <link rel="stylesheet" href="/node_modules/element-ui-iamp/dist/element-ui-iamp.css"> </head>
在组件的 script 标签中，需要使用如下命令引入 element-ui 和 element-ui-iamp：
import Vue from 'vue' import ElementUI from 'element-ui' import ElementIampUI from 'element-ui-iamp' Vue.use(ElementUI) Vue.use(ElementIampUI)
联想搜索
element-ui-iamp 的联想搜索功能，使用的是 element-ui 的 autoComplete 组件。可以通过如下代码实现：
-- -------------------- ---- -------
----------
-----
----------------
---------------
--------------------------------
-------------------
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
----- -------------- ------- ---------- ------ ----- -- ------- ---------
--
--
--------- -
------ -
------ -------- -- -----------
-
--
-------- -
------------------------ --- -
--- ------- - ----------- - ------------------------------------------------ - ----------
------------
--
------------------------- -
------ ----- -- -
------ ---- ------------------- ----------------
--
-
-
--
---------在上述代码中，我们使用了一个 data 数组来保存搜索历史记录。定义了 querySearch 方法，其中通过 createFilter 方法实现搜索的功能。
级联选择器
element-ui-iamp 的级联选择器组件，使用的是 element-ui 的 cascader、select 和 option 组件。可以通过如下代码实现：
-- -------------------- ---- -------
----------
-----
------------
-----------------
------------------
--------------
-----------------------
-------------------
---------------
----------
--------------------
---------------------------------
-------------------
-
----------
------------- ------ -- ------------
------------
-------------------
----------------
-------------
------------
----------
------------------
-------------------------------
-------------------
-
----------
------------- ------ -- ----------
------------
-------------------
----------------
-------------
------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
----------- ---
--------- ---
-------- -
-
--- ------
------ ------
--------- -
-
--- --------
------ -------
--------- -
- --- ---------- ------ -------- --
- --- ---------- ------ -------- -
-
--
-
--- --------
------ -------
--------- -
- --- ---------- ------ -------- --
- --- ---------- ------ -------- -
-
-
-
--
-
--- ------
------ ------
--------- -
-
--- --------
------ -------
--------- -
- --- ---------- ------ -------- --
- --- ---------- ------ -------- -
-
--
-
--- --------
------ -------
--------- -
- --- ---------- ------ -------- --
- --- ---------- ------ -------- -
-
-
-
-
--
------ -
------ -----
------ --------
--------- ----------
--
------------ ---
---------- --
--
--
------ -
------------ -
---------------- - ----------------------- -- ------- --- ---- -- ------------ -- ---
--------------- - ---
------------- - ---
-------------- - ---
--
--------------- -
-------------- - --------------------------- -- ------- --- ---- -- ------------ -- ---
------------- - ---
-
--
-------- -
------------------ -
------------ - -------
-
-
--
---------在上述代码中，我们使用了一个 options 数组来存储公司、部门和员工的级联关系。其中定义了三个 select 组件，分别是公司、部门和员工。定义了 changeCompany 方法，通过该方法更新公司、部门和员工的状态。同时，使用 watch 方法监听公司和部门的变化，更新员工的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5481e8991b448e5d60