cascader-custom 单选级联选择器（齐思博）

基础用法

单选

基础用法

<template>
  <div>
    <h-cascader-custom v-model="cascaderValue" :propData="cascaderData"></h-cascader-custom>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	cascaderValue: [],
			cascaderData: {
				labelName: '地区:',
				clearable: true,
				style: {
					width: '200px'
				},
				options: [
					{
						value: 1,
						label: '东南',
						children: [
							{
								value: 2,
								label: '上海',
								children: [
									{ value: 3, label: '普陀' },
									{ value: 4, label: '黄埔' },
									{ value: 5, label: '徐汇' }
								]
							},
							{
								value: 7,
								label: '江苏',
								children: [
									{ value: 8, label: '南京' },
									{ value: 9, label: '苏州' },
									{ value: 10, label: '无锡' }
								]
							},
							{
								value: 12,
								label: '浙江',
								children: [
									{ value: 13, label: '杭州' },
									{ value: 14, label: '宁波' },
									{ value: 15, label: '嘉兴' }
								]
							}
						]
					}
				]
			}
    }
  }
}
</script>

显示代码

自定义

多选

<template>
  <div>
    <h-cascader-custom v-model="cascaderValue" :propData="cascaderData"></h-cascader-custom>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	cascaderValue: [],
			cascaderData: {
				labelName: '地区:',
				props: { 
					multiple: true,
				},
				'collapse-tags': true,
				style: {
					width: '200px'
				},
				options: [
					{
						value: 1,
						label: '东南',
						children: [
							{
								value: 2,
								label: '上海',
								children: [
									{ value: 3, label: '普陀' },
									{ value: 4, label: '黄埔' },
									{ value: 5, label: '徐汇' }
								]
							},
							{
								value: 7,
								label: '江苏',
								children: [
									{ value: 8, label: '南京' },
									{ value: 9, label: '苏州' },
									{ value: 10, label: '无锡' }
								]
							},
							{
								value: 12,
								label: '浙江',
								children: [
									{ value: 13, label: '杭州' },
									{ value: 14, label: '宁波' },
									{ value: 15, label: '嘉兴' }
								]
							}
						]
					}
				]
			}
    }
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	选中项绑定值	—	—	—
propData	配置项具体见下表（另外支持Cascader 级联选择器所有配置）	object	—	—

propData 支持elementUI-Cascader 级联选择器所有配置

参数	说明	类型	可选值	默认值
labelName	输入框关联的label文字	string	—	—
labelName	当labelName不传或为空时，内容左对齐，否则右对齐
options	可选项数据源	array	—	—
disabled	是否禁用	boolean	—	false

Events

方法名	说明	参数
input	当选中节点变化时触发	选中节点的值
focus	获得焦点时触发	选中节点的值
change	当选中节点变化时触发	选中节点的值
expand-change	当展开节点发生变化时触发	各父级选项值组成的数组