Skip to content

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的keystring/number-
options选项的数据源, valuelabel 可以通过 CascaderProps 自定义.Record<string, unknown>[]-
props配置选项, 请参阅下面 CascaderProps 表。CascaderProps--
textHolder自定义显示选择框文案string-
hasBackground是否显示选择框的背景booleantrue
size组件size'large'/'default'/'small''small'
typeList组件tab页的列表{ label: string; key: string; options?: any[] }[]-

事件

事件名说明参数
handle-change-node当选中节点变化时触发(value: CascaderValue) => void
handle-type-changetab选择(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 }

贡献者:

水产品-马佳辉
水产品-王田

fpi-component