选择输入分组组件

代码事例

<template>
    <fk-row><p>选择输入分组</p></fk-row>
    <fk-space>
        <SelectInputGroup 
            v-model="model.inputValue" 
            v-model:selectValue="model.selectValue" 
            style="width: 260px;" 
            type="select" 
            :options="options" 
            :selectOptions="options"
            multiple 
            :placeholder="['请输入', '请选择']" 
            allow-clear 
            @confirm="handleConfirm" />
        <SelectInputGroup 
            v-model="model.userTree1" 
            v-model:selectValue="model.selectValue" 
            style="width: 260px;" 
            type="user-tree-select" 
            :options="options" 
            :selectOptions="options"
            multiple 
            :placeholder="['请输入', '请选择']" 
            allow-clear 
            @confirm="handleConfirm" />
        <SelectInputGroup 
            v-model="model.userTree2" 
            v-model:selectValue="model.selectValue" 
            style="width: 260px;" 
            type="user-tree-select" 
            :options="options" 
            :selectOptions="options"
            multiple 
            :placeholder="['请输入', '请选择']" 
            allow-clear 
            @confirm="handleConfirm" />
    </fk-space>
    <fk-row>
        <p>选择输入分组 <code>disabled</code> 状态</p>
    </fk-row>
    <fk-row>
        <SelectInputGroup v-model="model.inputValue" v-model:selectValue="model.selectValue" style="width: 260px;" :selectDisabled="false" :selectOptions="options" disabled multiple :placeholder="['请输入', '请选择']" />
    </fk-row>
    <fk-row>
        <p>数据模型</p>
    </fk-row>
    <fk-row>
        <JsonViewer :data="model" />
    </fk-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { SelectInputGroup } from '@erp/biz';

const model = ref({
 inputValue: '',
    selectValue: '包含',
});

const handleConfirm = () => {
    console.log('handleConfirm >>', arguments)
}

const options = ['包含','排除','为空', '不为空'];
</script>
<style lang="less" scoped>

</style>

选择输入组 组件

API

<input-select-group> Props

参数名	描述	类型	默认值
model-value (v-model)	输入框值	string	-
select-value	选择框值	string	-
size	输入框尺寸	'mini' | 'small' | 'medium' | 'large'	-
allow-clear	是否显示清除按钮	boolean	false
disabled	是否禁用	boolean	false
placeholder	输入框占位符	string[]	['请输入', '请选择']
options	选项数据	(string | number | boolean | SelectOptionData | SelectOptionGroup)[]	[]