mirror of
https://gitee.com/JavaLionLi/plus-ui.git
synced 2026-09-15 00:25:07 +08:00
73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<template>
|
|
<el-col :span="colSpan">
|
|
<el-form-item :label="label" :prop="prop">
|
|
<el-checkbox-group v-bind="$attrs">
|
|
<el-checkbox
|
|
v-for="item in computedItems"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-checkbox>
|
|
</el-checkbox-group>
|
|
</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>
|