Vue 동적 조회 규칙 생 성 구성 요소 구현
동적 조회 규칙 은 대체로 다음 그림 과 같다.사용자 정의 에 따라 검색 어 를 구성 할 수 있 는 복잡 한 구성 요소 로 SQL 조 회 를 대체적으로 실현 할 수 있 는 where 조건 입 니 다.다음은 mongodb 에서 따 온 소프트웨어 입 니 다.
2.구성 요소 구축 사고
규칙 적 인 구성 요소 의 조직 형식 에 따라 나무 로 볼 수 있 고 나무 줄기 와 나뭇잎 이 있어 어렵 지 않 습 니 다.
2.1 구성 요소 속성 data:트 리 구조의 내용 입 니 다.우 리 는 다음 과 같이 정의 합 니 다.
{
condition: 'AND',
rules: [],
}
operator List:작업 목록 배열,선택 할 수 있 는 작업 집합,정 의 는 다음 과 같 습 니 다.
{
label: ' ',
value: '⊂',
},
Element UI 로 구축 되 어 있 기 때문에 다양한 ui 컨트롤 을 편리 하 게 조합 하여 필요 한 인터페이스 를 구축 할 수 있 습 니 다.
물론 이 구성 요 소 는 트 리 로 간주 되 기 때문에 재 귀적 인 구성 요소 이기 때문에 자신 을 호출 하 는 것 도 관련 이 있다.
<template>
<div class="rules-group-container">
<div class="rules-group-header">
<el-radio-group v-model="data.condition" size="mini">
<el-radio-button label="AND"></el-radio-button>
<el-radio-button label="OR"></el-radio-button>
</el-radio-group>
<div>
<el-button size="mini" @click="addRule(data)"> </el-button>
<el-button size="mini" @click="addGroup(data)"> </el-button>
<el-button v-if="parent" size="mini" @click="delGroup(data, parent)"> </el-button>
</div>
</div>
<div class="rules-group-body">
<div class="rules-list">
<template v-for="(rule, index) in data.rules">
<div :key="index" v-if="!rule.condition" class="rule-container">
<!-- -->
<wt-dropdown
class="rule-item"
v-model="rule.FilterField"
:data="getFieldList(rule.FilterTable)"
@change="handleFieldChange(rule)"
></wt-dropdown>
<!-- -->
<wt-dropdown
class="rule-item"
v-model="rule.Operator"
:disabled="inputStatus && rule.FilterField === 'CommunityId'"
:data="getRule(rule.FilterTable, rule.FilterField)"
></wt-dropdown>
<!-- -->
<wt-multi-dropdown
class="rule-item-long"
v-if="rule.type === 'Dropdown'"
:disabled="inputStatus && rule.FilterField === 'CommunityId'"
v-model="rule.FilterValue"
:data="getData(rule.FilterTable, rule.FilterField)"
></wt-multi-dropdown>
<wt-number
class="rule-item-long"
:disabled="inputStatus && rule.FilterField === 'CommunityId'"
v-else-if="['DateTime', 'Number', 'Decimal'].includes(rule.type)"
v-model="rule.FilterValue"
></wt-number>
<wt-text class="rule-item-long" v-else v-model="rule.FilterValue" :disabled="inputStatus && rule.FilterField === 'CommunityId'"></wt-text>
<el-button size="mini" @click="delRule(index)"> </el-button>
</div>
<CreateRule
:key="index"
v-else
:data="rule"
:parent="data"
:fieldList="fieldList"
:operatorList="operatorList"
></CreateRule>
</template>
</div>
</div>
</div>
</template>
const rules = {
string: [
{
value: '==',
label: ' ',
},
{
value: '<>',
label: ' ',
},
{
value: '⊂',
label: ' ',
},
{
value: '⊄',
label: ' ',
},
{
value: 'in',
label: ' ',
},
{
value: 'ni',
label: ' ',
},
{
value: 'mc',
label: ' ',
},
],
number: [
{
value: '==',
label: ' ',
},
{
value: '<>',
label: ' ',
},
{
value: '≥',
label: ' ',
},
{
value: '≤',
label: ' ',
},
],
dict: [
{
value: 'in',
label: ' ',
},
{
value: 'ni',
label: ' ',
},
],
date: [
{
value: 'sdiff',
label: ' ',
},
{
value: 'ediff',
label: ' ',
},
],
}
주요 작업 은 추가\\삭제 그룹 과 규칙 과 관련 이 있 습 니 다.
getRule(table, field) {
let data = (rules && rules.string) || []
let theField = this.getCurrentField(table, field)
if (theField && theField.ControlType) {
if (['Dropdown'].includes(theField.ControlType)) {
return rules.dict
} else if (['DateTime'].includes(theField.ControlType)) {
return rules.date
} else if (['Number', 'Decimal'].includes(theField.ControlType)) {
return rules.number
} else {
return rules.string
}
}
return data
},
//
addRule(data) {
let rule = {
type: 'Text',
FilterTable: this.firstTable,
FilterField: this.firstField,
Operator: '==',
FilterValue: '',
}
data.rules.push(rule)
},
//
delRule(index) {
this.data.rules.splice(index, 1)
},
//
addGroup(data) {
let group = {
condition: 'OR',
rules: [
{
type: 'Text',
FilterTable: this.firstTable,
FilterField: '',
Operator: '',
FilterValue: '',
},
],
}
data.rules.push(group)
},
//
delGroup(data, parent) {
let index = parent.rules.findIndex((item) => item === data)
parent.rules.splice(index, 1)
},
이 구성 요소 의 이름 은
CreateRule이 며,정의 코드 는 매우 간단 하 다.
export default {
name: 'CreateRule',
props: {
parent: {
type: Object,
},
data: {
type: Object,
},
fieldList: {
type: Array,
default() {
return []
},
},
operatorList: {
type: Array,
default() {
return []
},
},
},
}
vue 에서 구성 요 소 를 사용 하려 면 구성 요소 목록 에 참조 하고 추가 하면 됩 니 다.
import CreateRule from './CreateRule'
export default {
name: 'NewRuleForm',
components: {
CreateRule,
},
}
<template>
<div class="new-rule-form">
<CreateRule
v-if="!loading"
:data="data"
:fieldList="FilterTable"
:operatorList="operatorList"
></CreateRule>
<div v-if="!loading" class="discription-wrap" v-html="discription"></div>
</div>
</template>
이것 은 절취 의 실제 효과 다.
인터페이스 에서 검색 조건 이나 필터 조건 으로 효과 가 좋아 매우 유연 하 게 할 수 있다.
5.소결
vue 개발 응용 프로그램 에서 윈도 우즈 소프트웨어 의 일부 인 터 페 이 스 를 많이 참고 할 수 있 고 가끔 은 우리 에 게 큰 영감 과 깨 우 침 을 줄 수 있다.
Vue 가 동적 조회 규칙 을 실현 하여 구성 요 소 를 생 성 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 동적 조회 규칙 생 성 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
