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
<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> |