cascader 级联选择器

适用于多级树结构，节点选择。

打开该组件会创建遮罩层，阻止用户页面上其他操作。

基本使用

• 通过visible参数配置是否显示级联选择器
• 支持v-model双向数据绑定

<template>
	<u-cascader-classify :visible.sync="visible" v-model='val' :data='treeData'></u-cascader-classify>
</template>

<script>
	export default {
		data() {
			return {
				visible: true,
                val: '',
                treeData: [
                    {
						id: '1',
						label: '节点1',
						children: [
							{
								id: '1-1',
								label: '节点1-1',
								children: [
									{
										id: '1-1-1',
										label: '节点1-1-1',
									}
								]
							},
							{
								id: '1-2',
								label: '节点1-2'
							},
							{
								id: '1-3',
								label: '节点1-3'
							},
						]
					},
					{
						id: '2',
						label: '节点-2',
					}
                ]
			}
		}
	}
</script>

自定义分类

通过classify自定义分类标签。

默认值：
[
	{
		name: '区域',
		targetIndex: 0,
		targetId: '',
	},
	{
		name: '流域',
		targetIndex: 1,
		targetId: '',
	}
]

name: 分类显示名称
targetIndex: 目标索引（根节点所在的数组索引）。
targetId: 目标key（根节点key）。如果targetIndex有值，则忽略targetId

<template>
	<u-cascader-classify :visible.sync="visible" v-model='val' :data='treeData' :classify='classify'></u-cascader-classify>
</template>

<script>
	export default {
		data() {
			return {
				visible: true,
                val: '',
				classify: [
					{
						name: '水果',
						targetIndex: 0,
						targetId: '',
					},
					{
						name: '蔬菜',
						targetIndex: 0,
						targetId: '',
					}
				],
                treeData: [
                    {
						id: '1',
						name: '节点1',
						children: [
							{
								id: '1-1',
								name: '节点1-1',
								children: [
									{
										id: '1-1-1',
										name: '节点1-1-1',
									}
								]
							},
							{
								id: '1-2',
								name: '节点1-2'
							},
							{
								id: '1-3',
								name: '节点1-3'
							},
						]
					},
					{
						id: '2',
						name: '节点-2',
					}
                ]
			}
		}
	}
</script>

自定义节点属性和节点选中设置

通过props自定义节点属性字段名称 通过mustLeaf控制是否只可选中叶子节点。默认为false，可选中所有节点

<template>
	<u-cascader-classify :visible.sync="visible" v-model='val' :data='treeData' :mustLeaf='true' :props='props'></u-cascader-classify>
</template>

<script>
	export default {
		data() {
			return {
				visible: true,
                val: '',
                treeData: [
                    {
						key: '1',
						label: '节点1',
                        subs: [
                            {
                                key: '1-2',
						        label: '节点1-2',
                            },
                            {
                                key: '1-3',
						        label: '节点1-3',
                            }
                        ]
					},
					{
						key: '2',
						label: '节点2',
					}
                ],
                props: {
                    key: 'key',
                    label: 'label',
                    children: 'subs'
                }
			}
		}
	}
</script>

API

Props

参数	说明	类型	默认值	可选值
visible	是否显示	Boolean	false	true
data	树数据	Array	[]	-
props	自定义节点属性	Object	{ key: 'id', label: 'name', children: 'children' }	-
mustLeaf	是否仅叶子节点可选	Boolean	false	true
classify	滴定仪分类标签	Arrya	--	--
theme	样式主题	String	''	normal care
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	true	false
confirmText	'确定', 文字	string	-	确定
cancelText	'取消', 文字	string	-	取消

Slot

名称	说明
header-action	搜索按钮右边区域的插槽

Events

事件名	说明	回调参数
submit	点击确定按钮时触发	-
cancel	点击取消按钮时触发	-