Vueは動的クエリルール生成コンポーネントを実装します

{
条件: 'AND'、
ルール: [],
}

{
     ラベル: 'include',
          値: '⊂',
},

<テンプレート>
    <div class="ルールグループコンテナ">
        <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="または"></el-radio-button>
            </el-ラジオグループ>
            <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-ドロップダウン
                            クラス="ルール項目"
                            v-model="rule.FilterField"
                            :data="getFieldList(rule.FilterTable)"
                            @change="handleFieldChange(ルール)"
                        </wt-dropdown>
                        <!-- 演算子 -->
                        <wt-ドロップダウン
                            クラス="ルール項目"
                            v-model="rule.Operator"
                            :disabled="inputStatus && rule.FilterField === 'コミュニティ ID'"
                            :data="getRule(rule.FilterTable、rule.FilterField)"
                        </wt-dropdown>
                        <!-- 値 -->
                        <wt-マルチドロップダウン
                            クラス="ルール項目長"
                            v-if="rule.type === 'ドロップダウン'"
                            :disabled="inputStatus && rule.FilterField === 'コミュニティ ID'"
                            v-model="rule.FilterValue"
                            :data="getData(rule.FilterTable、rule.FilterField)"
                        </wt-multi-dropdown>
                        <重量番号
                            クラス="ルール項目長"
                            :disabled="inputStatus && rule.FilterField === 'コミュニティ ID'"
                            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>
                    <ルールの作成
                        :key="インデックス"
                        v-else
                        :data="ルール"
                        :parent="データ"
                        :fieldList="フィールドリスト"
                        :operatorList="演算子リスト"
                    </ルールの作成>
                </テンプレート>
            </div>
        </div>
    </div>
</テンプレート>

定数ルール = {
    弦： [
        {
            値: '==',
            ラベル: '等しい'、
        },
        {
            値: '<>',
            ラベル: '等しくない'、
        },
        {
            値: '⊂',
            ラベル: 'include'、
        },
        {
            値: '⊄',
            ラベル: '含まれない'、
        },
        {
            値: 'in'、
            ラベル: 「そのうちの一人」
        },
        {
            値: 'ni'、
            ラベル: 「彼らのうちの1人ではない」
        },
        {
            値: 'mc',
            ラベル: 「複数の包含」、
        },
    ]、
    番号： [
        {
            値: '==',
            ラベル: '等しい'、
        },
        {
            値: '<>',
            ラベル: '等しくない'、
        },
        {
            値: '≥',
            ラベル: '以上'、
        },
        {
            値: '≤',
            ラベル: '以下'、
        },
    ]、
    辞書: [
        {
            値: 'in'、
            ラベル: 「そのうちの一人」
        },
        {
            値: 'ni'、
            ラベル: 「彼らのうちの1人ではない」
        },
    ]、
    日付： [
        {
            値: 'sdiff',
            ラベル: '数日前'、
        },
        {
            値: 'ediff',
            ラベル: 「数日後」
        },
    ]、
}

getRule(テーブル、フィールド) {
            データ = (ルール && ルール.文字列) || []
            theField = this.getCurrentField(テーブル、フィールド) とします。
            if (theField && theField.ControlType) {
                if (['ドロップダウン'].includes(theField.ControlType)) {
                    ルール.dictを返す
                } そうでない場合 (['DateTime'].includes(theField.ControlType)) {
                    ルールを返す.date
                } そうでない場合、(['Number', 'Decimal'].includes(theField.ControlType)) {
                    ルール番号を返す
                } それ以外 {
                    ルール文字列を返す
                }
            }
            データを返す
        },
        // ルールを追加する addRule(data) {
            ルール = {
                タイプ: 'テキスト'、
                フィルターテーブル: this.firstTable、
                フィルターフィールド: this.firstField、
                演算子: '==',
                フィルター値: ''、
            }
            data.rules.push(ルール)
        },
        // ルールを削除する delRule(index) {
            this.data.rules.splice(インデックス、1)
        },
        // グループを追加 addGroup(data) {
            グループ = {
                条件: 'OR'、
                ルール:
                    {
                        タイプ: 'テキスト'、
                        フィルターテーブル: this.firstTable、
                        フィルターフィールド: ''、
                        演算子: ''
                        フィルター値: ''、
                    },
                ]、
            }
            data.rules.push(グループ)
        },
        // グループを削除する delGroup(data, parent) {
            インデックスを parent.rules.findIndex((item) => item === data) とします。
            親.ルール.スプライス(インデックス, 1)
        },

エクスポートデフォルト{
    名前: 'CreateRule',
    小道具: {
        親： {
            タイプ: オブジェクト、
        },
        データ： {
            タイプ: オブジェクト、
        },
        フィールドリスト: {
            タイプ: 配列、
            デフォルト（） {
                戻る []
            },
        },
        演算子リスト: {
            タイプ: 配列、
            デフォルト（） {
                戻る []
            },
        },
    },
  }

'./CreateRule' から CreateRule をインポートします。
エクスポートデフォルト{
    名前: 'NewRuleForm',
    コンポーネント:
        ルールの作成、
    },
}

<テンプレート>
    <div class="新しいルールフォーム">
        <ルールの作成
            v-if="!読み込み中"
            :data="データ"
            :fieldList="フィルターテーブル"
            :operatorList="演算子リスト"
        </ルールの作成>
        <div v-if="!loading" class="discription-wrap" v-html="discription"></div>
    </div>
</テンプレート>