You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
47 lines
1.6 KiB
6 months ago
|
<template>
|
||
|
|
<div class="my_clearable_ecursion" :style="onFirst ? nFStyle : null">
|
||
|
|
<el-cascader v-model="selectedOptions" :options="processOptions(options)" />
|
||
|
|
<MyRegsele v-if="selectedOptions[0] >= 0 && options[selectedOptions[0]]?.children"
|
||
|
|
:options="options[selectedOptions[0]].children" :onFirst="true" :nFStyle="nFStyle"
|
||
|
|
v-model:activeData="activeData" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, watch, nextTick } from 'vue'
|
||
|
|
const props = defineProps(['options', 'onFirst', 'nFStyle', 'activeData', 'area'])
|
||
|
|
const $emit = defineEmits(['update:activeData', 'update:area', 'xxx'])
|
||
|
|
function processOptions(options) {
|
||
|
|
const arr = [{ value: -1, label: '请选择' }]
|
||
|
|
options.map((item, index) => arr.push({ ...item, value: index, children: [] }))
|
||
|
|
return arr
|
||
|
|
}
|
||
|
|
const selectedOptions = ref([-1])
|
||
|
|
watch(() => selectedOptions.value, () => {
|
||
|
|
const record = selectedOptions.value[0]
|
||
|
|
activeData.value = props.options[record]?.label||''
|
||
|
|
selectedOptions.value[0] = -1
|
||
|
|
nextTick(() => selectedOptions.value[0] = record)
|
||
|
|
})
|
||
|
|
const activeData = ref()
|
||
|
|
const getStr = str => {
|
||
|
|
let i = str.indexOf('/')
|
||
|
|
if (i == -1) return str
|
||
|
|
else return str.substring(0, i)
|
||
|
|
}
|
||
|
|
watch(() => activeData.value, () => {
|
||
|
|
$emit('update:activeData', `${getStr(`${props.activeData}`)}/${activeData.value}`)
|
||
|
|
$emit('update:area', activeData.value)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
::v-deep .el-cascader {
|
||
|
|
width: .5208rem;
|
||
|
|
}
|
||
|
|
::v-deep .el-input{
|
||
|
|
font-size: .0729rem;
|
||
|
|
}
|
||
|
|
.my_clearable_ecursion {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
</style>
|