fpi-componentAppearance
fpi-el-cascader-tab-select 0.8.10
级联树面板选择组件
TIP
当前组件在 element-plus-expand 0.8.10 版本后正式部署
tab基础使用
设置
typeList可以设置选择面板的tab页，比如如下可以用于切换 流域 和 区域, 设置v-model:current-type可以绑定当前选择的tab
<!--
* @Author: mjh
* @Date: 2023-08-18 14:04:49
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 10:58:51
* @Description:
-->
<template>
<div style="height: 300px;">
<div style="width: 140px;height: 30px;">
<fpi-el-cascader-tab-select
ref="areaCascaderRef"
v-model="cascaderObj.currentNode"
v-model:current-type="cascaderObj.currentType"
:type-list="cascaderObj.typeList"
@handle-change-node="handleChangeNode"
@handle-type-change="handleTypeChange"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const cascaderObj = reactive({
typeList: [
{
label: '区域',
key: 'area',
options: [
{
code: '330100000000',
id: 3301,
label: '杭州市',
administrativeRankName: '地级',
parentId: 33,
children: [
{
code: '330102000000',
id: 330102,
label: '上城区',
administrativeRankName: '县级',
parentId: 3301,
children: [
{
code: '3211',
id: 659037,
label: '小留镇',
parentId: 330102
},
{
code: '330102001000',
id: 659075,
label: '清波街道',
parentId: 330102,
administrativeRankCode: 4
}
]
}
]
}
]
},
{
label: '流域',
key: 'valley',
options: [
{
code: 'GA',
id: 60601,
label: '杭州水系',
waterType: 'A',
parentId: 6,
children: [
{
code: 'GAAK',
children: [
{
code: 'GAAA202',
children: [
{
code: '20230606',
id: 70707376,
label: '20230606',
waterType: 'A',
parentId: 70707056
}
],
id: 70707056,
label: '河段-2',
waterType: 'G',
parentId: 6060101
},
{
code: '20210518',
id: 70707329,
label: '测试20210518',
waterType: 'A',
parentId: 6060101
},
],
id: 6060101,
label: '钱塘江',
waterType: 'B',
parentId: 60601
}
]
}
]
}
],
currentType: 'area',
currentNode: 3301
})
const handleChangeNode = (curNode: any) => {
console.log(curNode, 'handleChangeNode')
}
const handleTypeChange = (type: string) => {
console.log(type, 'handleTypeChange')
}
</script>
显示代码
手动设置options
我们也可以在
typeList不放入options属性，当组件识别到内部无options属性时会单独获取传入options属性。 当然也可以不传入typeList属性，直接传入options属性当单独的级联面板使用。
<!--
* @Author: mjh
* @Date: 2023-08-18 14:04:49
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 10:58:57
* @Description:
-->
<template>
<div style="height: 300px;">
<div style="width: 140px;height: 30px;">
<fpi-el-cascader-tab-select
ref="areaCascaderRef"
v-model="cascaderObj.currentNode"
v-model:current-type="cascaderObj.currentType"
:type-list="cascaderObj.typeList"
:options="cascaderObj.options"
@handle-change-node="handleChangeNode"
@handle-type-change="handleTypeChange"
@handle-search-event="handleSearchEvent"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const typeObj = {
area: [
{
code: '330100000000',
id: 3301,
label: '杭州市',
administrativeRankName: '地级',
parentId: 33,
children: [
{
code: '330102000000',
id: 330102,
label: '上城区',
administrativeRankName: '县级',
parentId: 3301,
children: [
{
code: '3211',
id: 659037,
label: '小留镇',
parentId: 330102
},
{
code: '330102001000',
id: 659075,
label: '清波街道',
parentId: 330102,
administrativeRankCode: 4
}
]
}
]
}
],
valley: [
{
code: 'GA',
id: 60601,
label: '杭州水系',
waterType: 'A',
parentId: 6,
children: [
{
code: 'GAAK',
children: [
{
code: 'GAAA202',
children: [
{
code: '20230606',
id: 70707376,
label: '20230606',
waterType: 'A',
parentId: 70707056
}
],
id: 70707056,
label: '河段-2',
waterType: 'G',
parentId: 6060101
},
{
code: '20210518',
id: 70707329,
label: '测试20210518',
waterType: 'A',
parentId: 6060101
},
],
id: 6060101,
label: '钱塘江',
waterType: 'B',
parentId: 60601
}
]
}
]
}
const cascaderObj = reactive({
typeList: [
{ label: '区域', key: 'area' },
{ label: '流域', key: 'valley' }
],
currentType: 'area',
currentNode: 3301,
options: typeObj.area as Array<any>
})
const handleChangeNode = (curNode: any) => {
console.log(curNode, 'handleChangeNode')
}
const handleTypeChange = (type: string) => {
console.log(type, 'handleTypeChange')
cascaderObj.options = typeObj[type as keyof typeof typeObj]
}
// 搜索
const handleSearchEvent = (val: string) => {
console.log(val, 'handleSearchEvent')
}
</script>
显示代码
搜索的使用
组件内部有搜索组件，会自动模糊搜索 对应的 label 值，对应有
handleSearchEvent搜索输入事件
<!--
* @Author: mjh
* @Date: 2023-08-18 14:04:49
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 10:58:53
* @Description:
-->
<template>
<div style="display: flex;justify-content: space-between;height: 300px;">
<div style="width: 140px;height: 30px;">
<fpi-el-cascader-tab-select
ref="areaCascaderRef"
v-model="cascaderObj.currentNode"
v-model:current-type="cascaderObj.currentType"
:type-list="cascaderObj.typeList"
@handle-search-event="handleSearchEvent"
/>
</div>
<el-button @click="getSearchData()">
获取当前列表数据
</el-button>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
const cascaderObj = reactive({
typeList: [
{
label: '区域',
key: 'area',
options: [
{
code: '330100000000',
id: 3301,
label: '杭州市',
administrativeRankName: '地级',
parentId: 33,
children: [
{
code: '330102000000',
id: 330102,
label: '上城区',
administrativeRankName: '县级',
parentId: 3301,
children: [
{
code: '3211',
id: 659037,
label: '小留镇',
parentId: 330102
},
{
code: '330102001000',
id: 659075,
label: '清波街道',
parentId: 330102,
administrativeRankCode: 4
}
]
}
]
}
]
},
{
label: '流域',
key: 'valley',
options: [
{
code: 'GA',
id: 60601,
label: '杭州水系',
waterType: 'A',
parentId: 6,
children: [
{
code: 'GAAK',
children: [
{
code: 'GAAA202',
children: [
{
code: '20230606',
id: 70707376,
label: '20230606',
waterType: 'A',
parentId: 70707056
}
],
id: 70707056,
label: '河段-2',
waterType: 'G',
parentId: 6060101
},
{
code: '20210518',
id: 70707329,
label: '测试20210518',
waterType: 'A',
parentId: 6060101
},
],
id: 6060101,
label: '钱塘江',
waterType: 'B',
parentId: 60601
}
]
}
]
}
],
currentType: 'area',
currentNode: 3301
})
const areaCascaderRef = ref()
// 搜索
const handleSearchEvent = (val: string) => {
console.log(val, 'handleSearchEvent')
getSearchData()
}
const getSearchData = () => {
console.log(areaCascaderRef.value?.getOptionList(), 'getSearchData')
}
</script>
显示代码
自定义选择框文案
当然组件传入
textHolder时，组件内的选择框显示的文案就会使用此变量。
<!--
* @Author: mjh
* @Date: 2023-08-18 14:04:49
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 10:58:55
* @Description:
-->
<template>
<div style="height: 300px;">
<div style="width: 140px;height: 30px;">
<fpi-el-cascader-tab-select
ref="areaCascaderRef"
v-model="cascaderObj.currentNode"
v-model:current-type="cascaderObj.currentType"
:text-holder="cascaderObj.textHolder"
:type-list="cascaderObj.typeList"
@handle-change-node="handleChangeNode"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const cascaderObj = reactive({
typeList: [
{
label: '区域',
key: 'area',
options: [
{
code: '330100000000',
id: 3301,
label: '杭州市',
administrativeRankName: '地级',
parentId: 33,
children: [
{
code: '330102000000',
id: 330102,
label: '上城区',
administrativeRankName: '县级',
parentId: 3301,
children: [
{
code: '3211',
id: 659037,
label: '小留镇',
parentId: 330102
},
{
code: '330102001000',
id: 659075,
label: '清波街道',
parentId: 330102,
administrativeRankCode: 4
}
]
}
]
}
]
},
{
label: '流域',
key: 'valley',
options: [
{
code: 'GA',
id: 60601,
label: '杭州水系',
waterType: 'A',
parentId: 6,
children: [
{
code: 'GAAK',
children: [
{
code: 'GAAA202',
children: [
{
code: '20230606',
id: 70707376,
label: '20230606',
waterType: 'A',
parentId: 70707056
}
],
id: 70707056,
label: '河段-2',
waterType: 'G',
parentId: 6060101
},
{
code: '20210518',
id: 70707329,
label: '测试20210518',
waterType: 'A',
parentId: 6060101
},
],
id: 6060101,
label: '钱塘江',
waterType: 'B',
parentId: 60601
}
]
}
]
}
],
textHolder: '123',
currentType: 'area',
currentNode: 3301,
copyList: [] as any
})
const handleChangeNode = (curNode: any) => {
console.log(curNode, 'handleChangeNode')
cascaderObj.textHolder = curNode.label
}
</script>
显示代码
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string/number/object | - |
| current-type / v-model | 选中的tab的key | string/number | - |
| options | 选项的数据源， value 和 label 可以通过 CascaderProps 自定义. | Record<string, unknown>[] | - |
| props | 配置选项, 请参阅下面 CascaderProps 表。 | CascaderProps | -- |
| textHolder | 自定义显示选择框文案 | string | - |
| hasBackground | 是否显示选择框的背景 | boolean | true |
| size | 组件size | 'large'/'default'/'small' | 'small' |
| typeList | 组件tab页的列表 | { label: string; key: string; options?: any[] }[] | - |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| handle-change-node | 当选中节点变化时触发 | (value: CascaderValue) => void |
| handle-type-change | tab选择 | (key:string) => void |
| handle-search-event | 搜索触发 | (str:string) => void |
| handle-input-event | 搜索输入 | (str:string) => void |
| expand-change | 当展开节点发生变化时触发 | (value: CascaderNodePathValue) => void |
| close | 面板的关闭事件，提供给 Cascader 以便做更好的判断。 | () => void |
| panel-open | 面板打开 | () => void |
| panel-close | 面板关闭 | () => void |
方法
| 方法 | 说明 | 参数 |
|---|---|---|
| getCheckedNodes | 获取一个当前选中节点的数组。(仅仅是传单) 是否只返回叶选中的节点，默认是 false | (leafOnly: boolean)=> CascaderNode[] / undefined |
| clearCheckedNodes | 清空选中的节点 | () => void |
| get-option-list | 获取当前显示的列表 | any[] |
插槽
| 名称 | 说明 | 类型 |
|---|---|---|
| default | 下级节点的自定义内容，它们分别是当前节点对象和节点数据。 | { node: any, data: any } |
贡献者：
水产品-马佳辉
水产品-王田