Search Form Items

<nv-search-form></nv-search-form> 내부 슬롯에서 사용하는 검색용 폼 아이템입니다.

이 컴포넌트들은 내부적으로 <el-form-item>을 사용하고 있으며, 해당 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

공통 Props

이름	타입	기본값	설명
nv-filter	object	(required)	필터 객체 (전체 query 관리 목적)
nv-key	string	''	query key (query.q._d의 식별자)
nv-label	string / null	null	라벨로 표시될 문자열
nv-init-value	string / null / any	null	초기값 (검색어 또는 초기 선택값 등)
no-label	boolean	false	true면 라벨 표시 안 함
merge-cell	number	1	grid의 column 병합
nv-field	object	undefined	필터의 필드 정의
nv-and-or	string	'and' or 'in'	쿼리 조건의 논리 연산자 (and, or, in)
nv-oper	string	'eq'	연산자 (eq, like, gte, 등)

nv-search-dynamic

• 이 컴포넌트는 <el-select> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

<nv-search-dynamic :nv-filter="nvFilter" nv-key="keyword" :nv-lv-mapper="codes.keyword" />

const codes = ref(
    filterTool.toMapper({
        keyword: [
            { label: '전체', value: 'acnt.sample1,acnt.sample2' },
            { label: '샘플1', value: 'acnt.sample1' },
            { label: '샘플2', value: 'acnt.sample2' },
        ],
    })
);

nv-search-text

• 이 컴포넌트는 <el-input> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

<nv-search-text :nv-filter="nvFilter" :nv-field="nv.fields.user.SAMPLE"/>

const alias = 'acnt';

const SAMPLE = {
    key: `${alias}.sample`,
    property: 'sample',
    type: 'sample',
    label: '샘플',
    desc: '샘플',
    defaultVal: null,
};

const nv = {
    fields: {
        user: {
            SAMPLE: SAMPLE,
        },
    },
};

nv-search-select

• 이 컴포넌트는 <el-select> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

<nv-search-select :nv-filter="nvFilter" :nv-field="SAMPLE" :nv-lv-mapper="codes.sample"/>

const alias = 'acnt';

const SAMPLE = {
    key: `${alias}.sample`,
    property: 'sample',
    type: 'sample',
    label: '샘플',
    desc: '샘플',
    defaultVal: null,
};

const nv = {
    fields: {
        user: {
            SAMPLE: SAMPLE,
        },
    },
};

const codes = ref(
    filterTool.toMapper({
        sample: [
            { label: '전체', value: null },
            { label: '샘플1', value: 'a' },
            { label: '샘플2', value: 'b' },
            { label: '샘플3', value: 'c' },
        ],
    })
);

nv-search-code (Radio)

• 이 컴포넌트는 <el-radio> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

<nv-search-code :nv-filter="nvFilter" :nv-field="nv.fields.user.SAMPLE" :nv-lv-mapper="codes.boolean"/>

const alias = 'acnt';

const SAMPLE = {
    key: `${alias}.sample`,
    property: 'sample',
    type: 'sample',
    label: '샘플',
    desc: '샘플',
    defaultVal: null,
};

const nv = {
    fields: {
        user: {
            SAMPLE: SAMPLE,
        },
    },
};

const codes = ref(
    filterTool.toMapper({
        boolean: [
            { label: 'A', value: 'A' },
            { label: 'B', value: 'B' },
            { label: 'C', value: 'C' },
        ],
    })
);

nv-search-period (Date Range Picker)

• 이 컴포넌트는 <el-date-picker> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

props

이름	타입	기본값	설명
time	boolean	false	시간까지 포함할지 여부
format	string	'YYYY.MM.DD'	날짜 포맷
nv-init-from-value	string/ null	null	날짜 range 시작 값
nv-init-to-value	string/ null	null	날짜 range 끝 값

<nv-search-period :nv-filter="nvFilter" :nv-field="nv.fields.user.SAMPLE"/>

const alias = 'acnt';

const SAMPLE = {
    key: `${alias}.sample`,
    property: 'sample',
    type: 'sample',
    label: '샘플',
    desc: '샘플',
    defaultVal: null,
};

const nv = {
    fields: {
        user: {
            SAMPLE: SAMPLE,
        },
    },
};

nv-search-toggle

• 이 컴포넌트는 <el-switch> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

<nv-search-toggle :nv-filter="nvFilter" :nv-field="nv.fields.user.SAMPLE" :nv-init-value="true"/>

const alias = 'acnt';

const SAMPLE = {
    key: `${alias}.sample`,
    property: 'sample',
    type: 'sample',
    label: '샘플',
    desc: '샘플',
    defaultVal: null,
};

const nv = {
    fields: {
        user: {
            SAMPLE: SAMPLE,
        },
    },
};

nv-search-checkbox

• 이 컴포넌트는 <el-checkbox> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

<nv-search-checkbox :nv-filter="nvFilter" :nv-field="nv.fields.user.SAMPLE" :nv-lv-mapper="codes.check"/>

const alias = 'acnt';

const SAMPLE = {
    key: `${alias}.sample`,
    property: 'sample',
    type: 'sample',
    label: '샘플',
    desc: '샘플',
    defaultVal: null,
};

const nv = {
    fields: {
        user: {
            SAMPLE: SAMPLE,
        },
    },
};

const codes = ref(
    filterTool.toMapper({
        check: [
            { label: 'A', value: 'A' },
            { label: 'B', value: 'B' },
            { label: 'C', value: 'C' },
        ],
    })
);

merge-cell

• merge-cell prop을 사용하여 고급 검색 영역(#filters 슬롯) 내부에 배치되는 폼 필드가 그리드 시스템에서 차지할 컬럼의 수를 동적으로 조절하는 방법을 보여줍니다. 이는 마치 HTML 테이블의 colspan 속성과 유사한 기능을 제공합니다.
• 이를 통해 폼 내에서 특정 필드의 너비를 강조하거나 레이아웃을 시각적으로 조정하는 데 유용합니다. 예를 들어, 중요한 입력 필드를 더 넓게 표시하거나, 관련 없는 필드들을 묶어서 공간을 절약할 수 있습니다.

column-size :

label="셀 병합 조절" merge-cell :

<div>
    <small>column-size : </small>
    <el-input-number v-model="num" :min="1" :max="5" class="q-mb-md" />
    <br/>
    <small>label="셀 병합 조절" merge-cell : </small>
    <el-input-number v-model="mergeCell" :min="1" :max="5" class="q-mb-md" />
</div>

<nv-search-form always-expanded :column-size="num" :nv-filter="filters.SAMPLE" v-if="loaded">
<template #filters>
    <nv-search-text :merge-cell="mergeCell" :nv-filter="filters.SAMPLE8" :nv-field="nvFields.SAMPLE8"/>
    <nv-search-text :nv-filter="filters.SAMPLE" :nv-field="nvFields.SAMPLE"/>
    <nv-search-text :merge-cell="3" :nv-filter="filters.SAMPLE" :nv-field="nvFields.SAMPLE"/>
</template>
</nv-search-form>

const num = ref(3)
const mergeCell = ref(2)