12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup } from 'element-plus'
- import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { computed, getCurrentInstance, h } from 'vue'
- export default {
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const instance = getCurrentInstance()
- const { width, updateStream, ...formInput } = useFormInput(props, context)
- const { optionProps, options, getOptions, proxyOptionsValue } = useOptions(props, true, updateStream)
- instance.ctx.getOptions = getOptions // 此处代码的意义
- const isButton = computed(() => {
- return props.config?.isButton ?? false
- })
- const display = computed(() => {
- return props.config?.display ?? 'inline-flex'
- })
- const getCheckboxComponent = (isButton) => {
- return isButton ? ElCheckboxButton : ElCheckbox
- }
- const checkboxItem = (option) => {
- return h(getCheckboxComponent(isButton.value), {
- label: option[optionProps.value.value] ?? option,
- style: { display: display.value }
- }, {
- default: () => `${option[optionProps.value.label] ?? option}`
- })
- }
- const checkboxItems = () => options.value.map(checkboxItem)
- // [BUG EL2.2.17] ElCheckboxGroup 存在bug
- // modelValue 默认值为空数组 内部watch props.modelValue后进行数据校验,导致初始化时及触发数据验证
- // [TEMP FIX] 临时解决方案 当为空数组时 赋值为 undefined
- return () => h(ElCheckboxGroup, {
- ...context.attrs,
- ...formInput,
- style: { width: width.value },
- disabled: props.disabled,
- modelValue: proxyOptionsValue.value.length === 0 ? undefined : proxyOptionsValue.value,
- 'onUpdate:modelValue': (value) => {
- proxyOptionsValue.value = value
- }
- },
- { default: () => checkboxItems() })
- }
- }
|