<template>
|
<el-form-item :label="label">
|
<el-select
|
v-if="optionType == 'select'"
|
:model-value="_value"
|
@update:model-value="handleChange"
|
:placeholder="label"
|
:style="'width: ' + width"
|
>
|
<el-option
|
v-for="s in options"
|
:key="s.value"
|
:label="s.label"
|
:value="s.value"
|
/>
|
</el-select>
|
<el-checkbox-group
|
v-else-if="optionType == 'checkbox'"
|
:model-value="_value"
|
@update:model-value="handleChange"
|
:options="options"
|
/>
|
</el-form-item>
|
</template>
|
<script setup>
|
import { computed, onMounted } from 'vue';
|
|
const props = defineProps({
|
/**
|
* 返回结果果，对于不同类型的选择器，数据结构不同
|
* select | radio: {label:'', value:''}
|
* checkbox: [{label:'', value:''}, ...]
|
*/
|
modelValue: Object,
|
// 选项
|
options: Array,
|
/**
|
* 选择器类型
|
* select: 下拉框
|
* checkbox: 多选框
|
* radio：单选框
|
*/
|
optionType: {
|
type: String,
|
default: 'select'
|
},
|
label: {
|
type: String,
|
default: '查询条件'
|
},
|
// 是否默认返回初始选项
|
initValue: {
|
type: Boolean,
|
default: true
|
},
|
// form表单绑定属性名
|
prop: {
|
type: String,
|
default: ''
|
},
|
width: {
|
type: String,
|
default: '75px'
|
}
|
});
|
|
const emits = defineEmits(['update:modelValue']);
|
|
/**
|
* 选择器结果，对于不同类型的选择器，数据结构不同
|
* select: string | number | boolean
|
* checkbox: Array
|
* radio: string | number | boolean
|
*/
|
const _value = computed(() => {
|
switch (props.optionType) {
|
case 'select':
|
case 'radio':
|
return props.modelValue?.value;
|
case 'checkbox':
|
return props.modelValue?.map((v) => v.value);
|
default:
|
return props.modelValue?.value;
|
}
|
});
|
|
function handleChange(value) {
|
let opt;
|
switch (props.optionType) {
|
case 'select':
|
case 'radio':
|
opt = props.options.find((v) => v.value == value);
|
break;
|
case 'checkbox':
|
opt = props.options.filter((v) => value.indexOf(v.value) != -1);
|
break;
|
default:
|
break;
|
}
|
emits('update:modelValue', opt);
|
}
|
|
onMounted(() => {
|
if (props.initValue) {
|
switch (props.optionType) {
|
case 'select':
|
case 'radio':
|
emits('update:modelValue', props.options[0]);
|
break;
|
case 'checkbox':
|
emits('update:modelValue', props.options);
|
break;
|
default:
|
break;
|
}
|
}
|
});
|
</script>
|
<style scoped></style>
|
