54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<n-cascader v-bind="getProps" @update:value="handleUpdate" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { NCascader } from 'naive-ui'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
export default {
|
||
|
|
name: 'AreaCascader',
|
||
|
|
props: {
|
||
|
|
...NCascader.props,
|
||
|
|
showCheckbox: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
field: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return ['province', 'city', 'distance']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: ['selectd'],
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const getProps = computed(() => {
|
||
|
|
return {
|
||
|
|
...props
|
||
|
|
}
|
||
|
|
})
|
||
|
|
function handleUpdate(value, option, pathValues) {
|
||
|
|
const field = props.field
|
||
|
|
const valueField = props.valueField
|
||
|
|
const filedJson = {}
|
||
|
|
field.forEach((item, index) => {
|
||
|
|
filedJson[item] = pathValues?.[index]?.[valueField] || ''
|
||
|
|
})
|
||
|
|
emit('selectd', filedJson)
|
||
|
|
}
|
||
|
|
function clearValue() {
|
||
|
|
handleUpdate(null, null, [])
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
getProps,
|
||
|
|
handleUpdate,
|
||
|
|
clearValue
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
</style>
|