级联选择器是一种常见的交互组件，常用于表单中，允许用户从一系列相关选项中进行多层级的选择。Element-React 提供了一个强大的级联选择器组件，可以轻松地实现这种功能。
安装和引入
首先，你需要确保你的项目中已经安装了 element-react 和它的依赖库。你可以使用 npm 或 yarn 来安装这些依赖：
npm install element-react
或者
yarn add element-react
接下来，在你的 React 组件文件中引入级联选择器组件：
import React from 'react';
import { Cascader } from 'element-react';基本使用
数据结构
级联选择器的数据通常是一个数组，其中每个元素都是一个对象，包含 value、label 和 children 属性。value 和 label 分别代表值和显示的文本，children 是子级数据。
例如：
-- -------------------- ---- -------
----- ------- - -
-
------ -----------
------ -----
--------- -
-
------ -----------
------ -----
--------- -
-
------ -------
------ -----
-
-
-
-
--
-
------ ----------
------ -----
--------- -
-
------ ----------
------ -----
--------- -
-
------ --------------
------ -----
-
-
-
-
-
--渲染级联选择器
将上述数据传递给 <Cascader> 组件，并通过 v-model 来绑定值：
-- -------------------- ---- -------
----- --- ------- --------------- -
----- - -
------ --
-
------------ - ------- -- -
--------------- ----- ---
-
-------- -
------ -
-----
---------
-----------------
------------------------
----------------------------
--
------
--
-
-
-------------------- --- --------------------------------配置项
props 参数
除了 options 和 value 之外，还有其他一些常用的属性可以配置级联选择器的行为：
placeholder: 输入框未选中时的占位符。disabled: 是否禁用级联选择器。props: 自定义级联选择器的数据结构。show-all-levels: 是否显示所有级联的层级。
示例：
-- -------------------- ---- ------- --------- ----------------- ------------------------ ----------------- ---------------- -------- --------- ---- -- -------------------- ---------------------------- --
methods 方法
Cascader 组件提供了几个方法来操作组件的状态：
focus(): 让输入框获取焦点。blur(): 让输入框失去焦点。
示例：
const cascaderRef = React.createRef(); // 在某个事件中调用 cascaderRef.current.focus();
事件
Cascader 组件提供了几个事件来监听用户的操作：
onChange: 当级联选择器的值发生变化时触发。onVisibleChange: 当级联选择器的弹出层显示或隐藏时触发。
示例：
-- -------------------- ---- -------
----- --- ------- --------------- -
----- - -
------ ---
-------- -----
-
------------ - ------- -- -
--------------- ----- ---
-
------------------- - --------- -- -
--------------- ------- ---
-
-------- -
------ -
-----
---------
----------------------
-----------------
------------------------
----------------------------
------------------------------------------
--
------- --------------------------------------
-------- ------------------- - --- - --------
------
--
-
-总结
以上是 Element-React 中级联选择器的基本使用方法和配置方式。通过这些示例，你应该能够快速上手并灵活运用级联选择器组件来构建复杂的表单。如果需要更详细的信息，请参考官方文档。
请注意，以上示例代码可能需要根据你的具体环境进行调整。希望这个教程对你有所帮助！