前言
在前端开发中，级联选择器是非常常用的组件之一。而 vue-el-multi-cascader 是一款基于 Vue.js 的多选级联选择器组件，能够高效地应用于多种选择场景。本文将介绍 vue-el-multi-cascader 的使用教程，帮助大家更好地了解和使用这个工具。
安装和引入
vue-el-multi-cascader 是一个基于 npm 的包，你需要在你的项目中安装它。
npm install vue-el-multi-cascader -S
安装完成之后，在需要使用该组件的地方引入它：
import VueElMultiCascader from 'vue-el-multi-cascader'; Vue.use(VueElMultiCascader);
使用方法
基本用法
在 HTML 中使用 vue-el-multi-cascader：
<vue-el-multi-cascader :options="options"></vue-el-multi-cascader>
在 Vue 组件中定义 options 数据：
-- -------------------- ---- -------
------ -
------ -
-------- -
-
------ ----------
------ -----
--------- -
-
------ ----------
------ -----
--
-
------ -----------
------ -----
-
-
--
-
------ -----------
------ -----
--------- -
-
------ ---------
------ ------
--
-
------ ----------
------ -----
-
-
-
-
--
--高级用法
多选
你可以在 HTML 中使用 multiple 属性启用多选模式：
<vue-el-multi-cascader :options="options" multiple></vue-el-multi-cascader>
多选模式下，v-model 绑定的值将变为一个数组。
级联选择框数量
你可以通过 :max-levels 属性来设置级联选择框的数量：
<vue-el-multi-cascader :options="options" :max-levels="3"></vue-el-multi-cascader>
如果你的 options 数据中有三级嵌套，则将会显示出所有三级选择框，如果只有两级或者一级，则只会出现对应数量的选择框。
自定义选择框
你可以通过 :cascader-item-render 属性自定义每个级联选择框的渲染：
<vue-el-multi-cascader :options="options" :cascader-item-render="itemRender"></vue-el-multi-cascader>
在 Vue 组件中定义 itemRender 方法：
-- -------------------- ---- -------
------------- ------ ------ ----- -
------ -
---- -----------------------------
-------------
-- -------- ----------------------------------- ----------- -- ---------------------- --------
-
----
------
--
--选择框联动
你可以通过 :change-on-select 属性来控制选择框的联动行为：
<vue-el-multi-cascader :options="options" change-on-select></vue-el-multi-cascader>
启用 change-on-select 属性后，每当选择一个选项时，后续的选择框都会发生联动，将对应的选项展示出来。
示例代码
HTML：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------------------- ----------
----- ---------------- --------------------------------------------------------------------------------- --
------- -------------------------------------
------- -------------------------------------------------------
-------
------
---- ---------
------------------------- --------
---------------------- ------------------ --------------- ---------------- -------- -------------------------------------------
---------- -------- ------
------
-------
-------JavaScript：
-- -------------------- ---- -------
--- -----
--- -------
------ -
------ -
-------- -
-
------ ----------
------ -----
--------- -
-
------ ----------
------ -----
--
-
------ -----------
------ -----
-
-
--
-
------ -----------
------ -----
--------- -
-
------ ---------
------ ------
--
-
------ ----------
------ -----
-
-
-
--
--------- --
--
-
---总结
通过本文，相信大家已经对于 vue-el-multi-cascader 的使用有了很好的了解。vue-el-multi-cascader 不仅提供了丰富的配置选项，还支持多选和级联选择框联动，相信它能够很好地满足大家的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e50520b171f02e1dd6