uniapp 级联选择器 可选择任意一级 cascader

## xm-cascader

组件名：xm-cascader 组件地址

---

组件地址

xm-cascader 组件属性说明

## 重要提醒，该组件依赖uni-popup uni-icons

xm-cascader 组件属性说明

• options: Array，数据源
• value or string: String，绑定的id
• placeholder: String，输入框占位文本
• border: Boolean，是否有边框，默认为 false
• readonly: Boolean，是否仅读，默认为 false
• checkStrictly: Boolean，是否可选择任意一级，默认为 false
• clearable: Boolean，是否显示清空按钮，默认为 false
• showAllLevels: Boolean，是否显示完整路径，默认为 false
• props: Object，{value: ‘id’, label: ‘name’, children: ‘children’}，自定义字段规则

基本用法

<xm-cascader v-model="value" :options="list"></xm-cascader>

[{
		"id": 1,
		"name": "Parent 1",
		"parentId": 0,
		"children": [{
				"id": 2,
				"name": "Child 1.1",
				"parentId": 1,
				"children": []
			},
			{
				"id": 3,
				"name": "Child 1.2",
				"parentId": 1,
				"children": []
			}
		]
	},
	{
		"id": 4,
		"name": "Parent 2",
		"parentId": 0,
		"children": [{
				"id": 5,
				"name": "Child 2.1",
				"parentId": 4,
				"children": []
			},
			{
				"id": 6,
				"name": "Child 2.2",
				"parentId": 4,
				"children": [{
					"id": 7,
					"name": "Grandchild 2.2.1",
					"parentId": 6,
					"children": []
				}]
			}
		]
	}]

无边框 -

<xm-cascader :border="false" v-model="value" :options="list"></xm-cascader>

可清空 -

<xm-cascader :clearable="true" v-model="value" :options="list"></xm-cascader>

可选择任意一级 -

<xm-cascader :checkStrictly="true" v-model="value" :options="list"></xm-cascader>

显示完整路径 -

<xm-cascader :showAllLevels="true" v-model="value" :options="list"></xm-cascader>