121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<el-cascader
|
||
|
|
class='tags_cascader_input'
|
||
|
|
ref='areaCascader'
|
||
|
|
:options='options'
|
||
|
|
:props='isMultiple?baseMultipleCascader:baseCascader'
|
||
|
|
@change='change'
|
||
|
|
clearable
|
||
|
|
collapse-tags
|
||
|
|
collapse-tags-tooltip
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const areaCascader = ref()
|
||
|
|
let areaValue = ref()
|
||
|
|
const change = (e: any) => {
|
||
|
|
areaValue = areaCascader.value.getCheckedNodes()
|
||
|
|
}
|
||
|
|
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: '海口市',
|
||
|
|
label: '海口市',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: '秀英区',
|
||
|
|
label: '秀英区',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: '秀英区',
|
||
|
|
label: '秀英区',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '龙华区',
|
||
|
|
label: '龙华区',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '琼山区',
|
||
|
|
label: '琼山区',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '龙华区',
|
||
|
|
label: '龙华区',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '琼山区',
|
||
|
|
label: '琼山区',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '三亚市',
|
||
|
|
label: '三亚市',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: '海棠区',
|
||
|
|
label: '海棠区',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '吉阳区',
|
||
|
|
label: '吉阳区',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '天涯区',
|
||
|
|
label: '天涯区',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
// 区域联级下拉框配置,多选
|
||
|
|
const baseMultipleCascader = {
|
||
|
|
expandTrigger: 'hover' as const,
|
||
|
|
multiple: true
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 区域联级下拉框配置，单选
|
||
|
|
const baseCascader = {
|
||
|
|
expandTrigger: 'hover' as const
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*暴露areaValue、areaCascader*/
|
||
|
|
defineExpose({
|
||
|
|
areaCascader,
|
||
|
|
areaValue
|
||
|
|
})
|
||
|
|
/*定义参数给父组件*/
|
||
|
|
const props = defineProps({
|
||
|
|
//根据父组件传递是否多选，默认单选
|
||
|
|
isMultiple: Boolean
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tags_cascader_input {
|
||
|
|
height: 32px !important;
|
||
|
|
width: 350px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tags_cascader_input .el-input--suffix {
|
||
|
|
height: 32px !important;
|
||
|
|
width: 280px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|