1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <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>
|