05-级联组件实现过滤方法 - CloudKanBan 相关

# **1.概述**
在项目实施中，偶尔会遇到过滤条件不同，看板项预览内容相同的情况，这时候需要创建很多看板项。为了解决这一问题，CloudKanBan新增了“级联组件”，能实现自定义内容实现刷新页面数据。

# **2.实现步骤**
1.选中设计器左侧文本类，拖拽级联选择组件，如下图

![](/media//202302/2023-02-14_092150.png)

2.选中级联组件，绑定数据源，如下图

![](/media//202302/2023-02-14_092246.png)

<span style="color:red">注意：如果数据源使用绑定形式，在存储过程中返回数据同“文本组件”一样，字段名要求是value，值是json字符串，具体json可参考如下：</span>
```json
[
    {
        "label": "广东省",
        "value": 1,
        "children": [
            {
                "label": "深圳市",
                "value": 2,
                "children": [
                    {
                        "value": 3,
                        "label": "福田区"
                    },
                    {
                        "value": 4,
                        "label": "罗湖区"
                    },
                    {
                        "value": 5,
                        "label": "龙华区"
                    }
                ]
            },
            {
                "label": "广州市",
                "value": 6,
                "children": [
                    {
                        "value": 7,
                        "label": "越秀区"
                    },
                    {
                        "value": 8,
                        "label": "天河区"
                    }
                ]
            }
        ]
    }
]
```

3.选中级联组件，填写组件字段，CloudKanBan会自动在请求的UserData参数中携带key为组件字段值，value为级联组件的激活值，如下图

![](/media//202302/2023-02-14_093118.png)

mycascader是该组件自定义的key，值是一个已选中的激活值，在标准的webapi存储过程中，使用参数
```sql
	 SELECT JSON_VALUE(@UserData, '$.mycascader[0]')
```
若没有填写组件字段，CloudKanBan会默认生成cascader1、cascader2、cascader3...(支持多级联组件)，如下图默认带出的数据源示例

![](/media//202302/2023-02-14_093353.png)

若勾选了“多选”属性，那传递的值将变为多维数组
如："cascader1":[[1,2,3],[1,2,4]]

<span style="color:red">备注：
1.在配置完输入框组件后，点击“刷新”按钮实现手动刷新。（自动携带看板项所有级联组件的参数）
2.级联数据源只在进入页面第一次渲染时生效</span>