优化自定义控件,避免报警告(不影响功能)

pull/216/head
zhangdaiscott 2022-11-01 19:33:22 +08:00
parent 737312e959
commit 088f72db62
3 changed files with 43 additions and 24 deletions

View File

@ -1,24 +1,26 @@
<template>
<div class="area-select">
<!--省份-->
<a-select v-model:value="province" @change="proChange" allowClear :disabled="disabled">
<template v-for="item in provinceOptions" :key="`${item.value}`">
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
</template>
</a-select>
<!--城市-->
<a-select v-if="level >= 2" v-model:value="city" @change="cityChange" :disabled="disabled">
<template v-for="item in cityOptions" :key="`${item.value}`">
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
</template>
</a-select>
<!--地区-->
<a-select v-if="level >= 3" v-model:value="area" @change="areaChange" :disabled="disabled">
<template v-for="item in areaOptions" :key="`${item.value}`">
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
</template>
</a-select>
</div>
<a-form-item-rest>
<div class="area-select">
<!--省份-->
<a-select v-model:value="province" @change="proChange" allowClear :disabled="disabled">
<template v-for="item in provinceOptions" :key="`${item.value}`">
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
</template>
</a-select>
<!--城市-->
<a-select v-if="level >= 2" v-model:value="city" @change="cityChange" :disabled="disabled">
<template v-for="item in cityOptions" :key="`${item.value}`">
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
</template>
</a-select>
<!--地区-->
<a-select v-if="level >= 3" v-model:value="area" @change="areaChange" :disabled="disabled">
<template v-for="item in areaOptions" :key="`${item.value}`">
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
</template>
</a-select>
</div>
</a-form-item-rest>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, onUnmounted, toRefs } from 'vue';
@ -35,8 +37,17 @@
area: [String],
level: propTypes.number.def(3),
disabled: propTypes.bool.def(false),
codeField: propTypes.string,
size: propTypes.string,
placeholder: propTypes.string,
formValues: propTypes.any,
allowClear: propTypes.bool.def(false),
getPopupContainer: {
type: Function,
default: (node) => node.parentNode,
},
},
emits: ['change', 'update:value'],
emits: ['change', 'update:value','update:area','update:city','update:province'],
setup(props, { emit, refs }) {
const emitData = ref<any[]>([]);
//

View File

@ -76,7 +76,8 @@
console.info(props);
const emitData = ref<any[]>([]);
const treeData = ref<any[]>([]);
const treeValue = ref('');
const treeValue = ref();
treeValue.value = '';
const attrs = useAttrs();
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
watch(
@ -118,7 +119,11 @@
function loadItemByCode() {
if (!props.value || props.value == '0') {
treeValue.value = [];
if(props.multiple){
treeValue.value = [];
}else{
treeValue.value = '';
}
} else {
loadDictItem({ ids: props.value }).then((res) => {
let values = props.value.split(',');
@ -127,6 +132,9 @@
value: values[index],
label: item,
}));
if(!props.multiple){
treeValue.value = treeValue.value[0];
}
onLoadTriggleChange(res[0]);
});
}

View File

@ -6,8 +6,8 @@
:action="uploadUrl"
:fileList="fileList"
:disabled="disabled"
:remove="onRemove"
v-bind="bindProps"
@remove="onRemove"
@change="onFileChange"
@preview="onFilePreview"
>