eks-cascader 是一个基于 React 的级联选择器组件，适用于前端开发中的数据选择场景，例如省市区选择、商品种类选择等。它可以根据特定的数据格式生成一颗级联树，并支持异步加载等实用功能。
安装
要使用 eks-cascader，你需要先把它安装到你的项目中。你可以使用 npm 或 yarn 来安装它。
npm install eks-cascader --save
或者
yarn add eks-cascader
使用
包导入
导入 eks-cascader 包，以及相关的样式文件和依赖库。
import React from 'react' import 'antd/dist/antd.css' import 'eks-cascader/dist/index.css' import Cascader from 'eks-cascader'
数据源
eks-cascader 可以处理任意格式的数据源（JSON），只要满足特定的数据结构即可。例如：
-- -------------------- ---- -------
----- ---- - -
-
------ ----------
------ -----
--------- -
-
------ ----------
------ -----
--------- -
-
------ ---------------
------ -----
-
-
--
-
------ ------------
------ -----
--------- -
-
------ -------------
------ -----
-
-
-
-
--
-
------ -----------
------ -----
--------- -
-
------ ----------
------ -----
--------- -
-
------ ------------
------ -----
-
-
--
-
------ ---------
------ -----
--------- -
-
------ -----------
------ -----
-
-
-
-
-
-基本用法
使用 eks-cascader 的最基础用法，非常简单。只要把数据源设置成 props 的 value，就可以渲染出级联选择器。
-- -------------------- ---- -------
------ ------- -------- ----- -
----- ---- - ------------
------ -
---- ----------------
--------- ----------- --
------
--
-高级用法
除了基本用法之外，eks-cascader 还支持很多高级功能，满足更多复杂业务需求。例如：自定义各级菜单的样式、自定义加载数据的函数、级联选择后执行回调函数、支持异步加载等等。
以下是使用例子：
-- -------------------- ---- -------
------ ------- -------- ----- -
----- ---- - ------------
----- ------------- - ------------------ ------------------
----- ----------- - ------- ------ -- -
-- ---------
-- -------- ----- -------------
-- --- ----------------
------ ------------------
--
----- -------- - -------- ---------------- -- -
-- ------------
------------------- -----------------
--
----- ---------------- - ------- ------ -- -
-- --------------
--
------ -
---- ----------------
---------
-----------
-----------------------------
-------------------------
-------------------
-----------------------------------
--
------
--
-结语
使用 eks-cascader，可以快速方便地为项目添加级联选择器功能，进而提高用户体验和数据准确性。它简单易学，提供了丰富的配置选项，以及灵活的自定义方法，帮助你完成更多的前端业务开发任务。
示例代码
-- -------------------- ---- -------
------ ----- ---- -------
------ --------------------
------ -----------------------------
------ -------- ---- --------------
------ ------- -------- ----- -
----- ---- - -
-
------ ----------
------ -----
--------- -
-
------ ----------
------ -----
--------- -
-
------ ---------------
------ -----
-
-
--
-
------ ------------
------ -----
--------- -
-
------ -------------
------ -----
-
-
-
-
--
-
------ -----------
------ -----
--------- -
-
------ ----------
------ -----
--------- -
-
------ ------------
------ -----
-
-
--
-
------ ---------
------ -----
--------- -
-
------ -----------
------ -----
-
-
-
-
-
--
----- ------------- - ------------------ ------------------
----- ----------- - ------- ------ -- -
------ ------------------
--
----- -------- - -------- ---------------- -- -
------------------- -----------------
--
----- ---------------- - ------- ------ -- -
-------------------
--
------ -
---- ----------------
---------
-----------
-----------------------------
-------------------------
-------------------
-----------------------------------
--
------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8681e8991b448e5fe7