# 级联组件 Cascader
# 基本用法
基本用法
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
<title>基本用法</title>
<describe>当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。</describe>
<template>
<hc-cascader
:clearable="true"
:data="data"
style="width:300px;"
v-model="cascader"
></hc-cascader>
</template>
<script>
export default {
data: function() {
return {
cascader: [],
data: [
{
value: "5b4a07d0-2589-ea11-a4fa-f894c2dbd14c",
text: '零二开专项',
children: [
{
value: '23823ef6-2589-ea11-a4fa-f894c2dbd14c',
text: '在线编码',
children: [
{
value: 'a397a4d8-6dac-449b-8a55-2558907a1668',
text: '【数据源】li001合同变更基本信息表单',
extData: {
type: 'tab',
pageType: '表单页面',
url: '/std/00993403/a397a4d8-6dac-449b-8a55-2558907a1668',
}
},
{
value: '3f0da8eb-9783-4d54-b05a-c5a707341b9d',
text: 'li001合同变更基本信息查询列表',
extData: {
type: 'tab',
pageType: '列表页面',
url: '/std/00993403/3f0da8eb-9783-4d54-b05a-c5a707341b9d',
}
},
{
value: '682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
text: '弹出框-列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
}
},
{
value: '670b3e96-7cf8-4e99-8157-08d8b1e5a127',
text: '弹出框-表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/670b3e96-7cf8-4e99-8157-08d8b1e5a127',
}
},
{
value: 'c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
text: '用户表表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
}
},
{
value: '4448616e-96de-4cb5-58c4-08d8a0d8bd32',
text: 'flow供应商查询列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/4448616e-96de-4cb5-58c4-08d8a0d8bd32',
}
},
{
value: 'e436a731-fd22-4df9-5506-08d8a09ba493',
text: 'flow供应商表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/e436a731-fd22-4df9-5506-08d8a09ba493',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
},
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
],
},
],
},
],
}
}
}
</script>
# 多选
多选
可通过 multiple = true 来开启多选模式
<title>多选</title>
<describe>可通过 multiple = true 来开启多选模式</describe>
<template>
<hc-cascader
:clearable="true"
:data="data"
:multiple="true"
style="width:300px;"
v-model="cascader"
></hc-cascader>
</template>
<script>
export default {
data: function() {
return {
cascader: [],
data: [
{
value: "5b4a07d0-2589-ea11-a4fa-f894c2dbd14c",
text: '零二开专项',
children: [
{
value: '23823ef6-2589-ea11-a4fa-f894c2dbd14c',
text: '在线编码',
children: [
{
value: 'a397a4d8-6dac-449b-8a55-2558907a1668',
text: '【数据源】li001合同变更基本信息表单',
extData: {
type: 'tab',
pageType: '表单页面',
url: '/std/00993403/a397a4d8-6dac-449b-8a55-2558907a1668',
}
},
{
value: '3f0da8eb-9783-4d54-b05a-c5a707341b9d',
text: 'li001合同变更基本信息查询列表',
extData: {
type: 'tab',
pageType: '列表页面',
url: '/std/00993403/3f0da8eb-9783-4d54-b05a-c5a707341b9d',
}
},
{
value: '682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
text: '弹出框-列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
}
},
{
value: '670b3e96-7cf8-4e99-8157-08d8b1e5a127',
text: '弹出框-表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/670b3e96-7cf8-4e99-8157-08d8b1e5a127',
}
},
{
value: 'c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
text: '用户表表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
}
},
{
value: '4448616e-96de-4cb5-58c4-08d8a0d8bd32',
text: 'flow供应商查询列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/4448616e-96de-4cb5-58c4-08d8a0d8bd32',
}
},
{
value: 'e436a731-fd22-4df9-5506-08d8a09ba493',
text: 'flow供应商表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/e436a731-fd22-4df9-5506-08d8a09ba493',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
},
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
],
},
],
},
],
}
}
}
</script>
# 仅显示最后一级
基本用法
可以通过show-levels在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
<title>基本用法</title>
<describe>可以通过show-levels在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。</describe>
<template>
<hc-cascader
:clearable="true"
:data="data"
:show-levels="false"
style="width:300px;"
v-model="cascader"
></hc-cascader>
</template>
<script>
export default {
data: function() {
return {
cascader: [],
data: [
{
value: "5b4a07d0-2589-ea11-a4fa-f894c2dbd14c",
text: '零二开专项',
children: [
{
value: '23823ef6-2589-ea11-a4fa-f894c2dbd14c',
text: '在线编码',
children: [
{
value: 'a397a4d8-6dac-449b-8a55-2558907a1668',
text: '【数据源】li001合同变更基本信息表单',
extData: {
type: 'tab',
pageType: '表单页面',
url: '/std/00993403/a397a4d8-6dac-449b-8a55-2558907a1668',
}
},
{
value: '3f0da8eb-9783-4d54-b05a-c5a707341b9d',
text: 'li001合同变更基本信息查询列表',
extData: {
type: 'tab',
pageType: '列表页面',
url: '/std/00993403/3f0da8eb-9783-4d54-b05a-c5a707341b9d',
}
},
{
value: '682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
text: '弹出框-列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
}
},
{
value: '670b3e96-7cf8-4e99-8157-08d8b1e5a127',
text: '弹出框-表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/670b3e96-7cf8-4e99-8157-08d8b1e5a127',
}
},
{
value: 'c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
text: '用户表表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
}
},
{
value: '4448616e-96de-4cb5-58c4-08d8a0d8bd32',
text: 'flow供应商查询列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/4448616e-96de-4cb5-58c4-08d8a0d8bd32',
}
},
{
value: 'e436a731-fd22-4df9-5506-08d8a09ba493',
text: 'flow供应商表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/e436a731-fd22-4df9-5506-08d8a09ba493',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
},
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
],
},
],
},
],
}
}
}
</script>
# 禁用状态
基本用法
可以通过diabled控制组件禁用状态
<title>基本用法</title>
<describe>可以通过diabled控制组件禁用状态</describe>
<template>
<hc-cascader
:disabled="true"
:data="data"
:show-levels="false"
style="width:300px;"
v-model="cascader"
></hc-cascader>
</template>
<script>
export default {
data: function() {
return {
cascader: [],
data: [
{
value: "5b4a07d0-2589-ea11-a4fa-f894c2dbd14c",
text: '零二开专项',
children: [
{
value: '23823ef6-2589-ea11-a4fa-f894c2dbd14c',
text: '在线编码',
children: [
{
value: 'a397a4d8-6dac-449b-8a55-2558907a1668',
text: '【数据源】li001合同变更基本信息表单',
extData: {
type: 'tab',
pageType: '表单页面',
url: '/std/00993403/a397a4d8-6dac-449b-8a55-2558907a1668',
}
},
{
value: '3f0da8eb-9783-4d54-b05a-c5a707341b9d',
text: 'li001合同变更基本信息查询列表',
extData: {
type: 'tab',
pageType: '列表页面',
url: '/std/00993403/3f0da8eb-9783-4d54-b05a-c5a707341b9d',
}
},
{
value: '682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
text: '弹出框-列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/682d6ac0-d7c6-4440-8ec3-08d8b1e5a127',
}
},
{
value: '670b3e96-7cf8-4e99-8157-08d8b1e5a127',
text: '弹出框-表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/670b3e96-7cf8-4e99-8157-08d8b1e5a127',
}
},
{
value: 'c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
text: '用户表表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/c7e0bded-bd1e-430c-c4f5-08d8ab016bee',
}
},
{
value: '4448616e-96de-4cb5-58c4-08d8a0d8bd32',
text: 'flow供应商查询列表',
extData: {
type: '',
pageType: '列表页面',
url: '/std/00993403/4448616e-96de-4cb5-58c4-08d8a0d8bd32',
}
},
{
value: 'e436a731-fd22-4df9-5506-08d8a09ba493',
text: 'flow供应商表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/e436a731-fd22-4df9-5506-08d8a09ba493',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
},
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89f',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
{
value: '8da4f6e2-7752-45d0-ea40-08d89e43e89g',
text: '供应商业务流测试表单',
extData: {
type: '',
pageType: '表单页面',
url: '/std/00993403/8da4f6e2-7752-45d0-ea40-08d89e43e89f',
}
},
],
},
],
},
],
}
}
}
</script>
# 属性及事件
# HcCascader属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
v-model | 绑定值 | array | - | [] |
data | 选项数据 | array | -- | -- |
text-field | 选项数据项文本名称 | string | -- | text |
value-field | 选项数据项值名称 | string | -- | value |
children-field | 选项数据子选项名称 | string | -- | children |
show-levels | 输入框是否显示层级 | boolean | -- | true |
clearable | 是否可以清空 | boolean | -- | false |
multiple | 是否多选 | boolean | -- | false |
disabled | 是否禁用状态 | boolean | -- | false |
viewable | 是否查看状态 | boolean | -- | false |
# HcCascader事件
| 名称 | 说明 | 参数 |
|---|---|---|
change | 值改变事件 | (e: array) => void |
登录