70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<el-col :span="colSpan">
|
|
<el-form-item :label="label" :prop="prop">
|
|
<el-select v-bind="$attrs">
|
|
<el-option v-for="item in computedItems" :value="item[props.value]" :label="item[props.label]"></el-option>
|
|
<template v-for="(_value, name) in $slots" #[name]="scopeData">
|
|
<slot :name="name" v-bind="scopeData"></slot>
|
|
</template>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
const _props = defineProps({
|
|
label: String,
|
|
prop: String,
|
|
|
|
/**
|
|
* 每行显示几个, 默认24
|
|
*/
|
|
colSpan: {
|
|
type: Number,
|
|
default: 24
|
|
},
|
|
/**
|
|
* 传入的标准数据项
|
|
*/
|
|
items: {
|
|
type: Array as () => any[],
|
|
default: () => []
|
|
},
|
|
/**
|
|
* 传入的字典数据
|
|
*/
|
|
dicts: {
|
|
type: Array as () => any[],
|
|
default: () => []
|
|
},
|
|
/**
|
|
* 自定义配置项，仅当 dicts 为空时使用
|
|
* 默认配置: { label: 'label', value: 'value' }
|
|
*/
|
|
props: {
|
|
type: Object,
|
|
default: () => ({
|
|
label: 'label',
|
|
value: 'value'
|
|
})
|
|
}
|
|
})
|
|
|
|
// 使用计算属性统一管理显示数据
|
|
const computedItems = computed(() => {
|
|
if (_props.dicts.length > 0) {
|
|
return _props.dicts.map((dict) => ({
|
|
label: dict.label,
|
|
value: dict.value
|
|
}))
|
|
} else {
|
|
return _props.items.map((item) => ({
|
|
label: item[_props.props.label],
|
|
value: item[_props.props.value]
|
|
}))
|
|
}
|
|
})
|
|
</script>
|