cip-components/cip-form-input/basic/cascader/index.vue

<template>
  <el-cascader :model-value="modelValue"
              @update:modelValue="emitInput"
              :placeholder="placeholder"
              :options="options"
              :props="optionProps"
              :disabled="disabled"
              :style="{width}"
              :clearable="clearable"></el-cascader>
</template>
<script>
import { ElCascader } from 'element-plus'
import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed } from 'vue'
export default {
  components: { ElCascader },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const formInput = useFormInput(props, context)
    // 是否多选,ElCascader的多选比较特殊,multiple是在props里面,所以特殊处理
    const multiple = computed(() => {
      return props.config?.multiple ?? false
    })
    const { options } = useOptions(props, multiple)
    const optionProps = computed(() => {
      const multiple = props.config?.multiple ?? false
      return props.config?.optionProps ? { multiple, ...props.config?.optionProps } : {
        value: 'value',
        label: 'label',
        children: 'children',
        multiple
      }
    })
    return {
      ...formInput,
      options,
      optionProps
    }
  }
}
</script>

<style lang="less">
.el-cascader-panel{
  max-height: 50vh;
  overflow-y: scroll;
}
</style>