123456789101112131415161718192021222324252627282930 |
- import { computed, ref } from 'vue'
- import { layoutProps } from '../layout-props'
- import { ElCollapse, ElCollapseItem } from 'element-plus'
- import { useFormLayoutOptions } from '@cip/components/hooks/use-form-layout'
- export default {
- name: 'BasicCollapse',
- props: layoutProps,
- setup (props, { slots, emit }) {
- const { options, updateConfig, ...handler } = useFormLayoutOptions({ props, emit })
- const grid = computed(() => {
- return props.config._isGrid
- })
- const active = ref('')
- if (props.config.active) {
- // eslint-disable-next-line vue/no-setup-props-destructure
- active.value = props.config.active
- }
- return () => (<ElCollapse v-model={active.value}>
- {options.value.map((option, optionIndex) => {
- const { children, ...itemConfig } = option
- return <ElCollapseItem key={itemConfig.name || optionIndex} name={itemConfig.name} title={itemConfig.title}>
- <div class={{ 'cip-form--grid': grid.value }}
- style={{ gridTemplateColumns: `repeat(${typeof grid.value === 'number' ? grid.value : 3},1fr)` }}>
- {slots.item?.({ children, optionIndex, isShow: props.config._isShow, ...handler })}
- </div>
- </ElCollapseItem>
- })}
- </ElCollapse>)
- }
- }
|