element-plus-jsx/es/form/plugins/select.js

基于 Element Plus 扩展 JSX 语法的组件库

import { createVNode, mergeProps } from 'vue';
import { _get, _set } from '../../_utils/index.js';
import { defineFormFnPlugin, useFnOrRefProp } from '../../hooks.js';
import { ElSelect, ElOptionGroup, ElOption } from 'element-plus';

var selectPlugins = defineFormFnPlugin(props => {
  return props.formFn.map(item => {
    if (!item.slots?.default && item.type === 'select') {
      return {
        ...item,
        slots: {
          default: () => createVNode(ElSelect, mergeProps({
            "style": {
              width: '100%'
            },
            "modelValue": _get(props.form.value, item.prop),
            "onUpdate:modelValue": val => {
              _set(props.form.value, item.prop, val);
            },
            "placeholder": item.placeholder,
            "disabled": useFnOrRefProp(item.disabled, props)
          }, item.selectProps), {
            default: () => [item.selectGroupOptions?.map(groupOption => {
              return createVNode(ElOptionGroup, groupOption, {
                default: () => [groupOption.selectOptions?.map(option => {
                  return createVNode(ElOption, option, option.slots);
                })],
                ...groupOption.slots
              });
            }), item.selectOptions?.map(option => {
              return createVNode(ElOption, option, option.slots);
            })],
            ...item.selectProps?.slots
          })
        }
      };
    }
    return item;
  });
});

export { selectPlugins as default };