功能描述

对某个模块进行数据条件查询

属性props

参数	必填	数据类型	默认值	可选值	说明
cols	否	Number	4		查询器界面总列数
labelWidth	否	String	80px		查询器每列的标签文本宽度
dependent	否	Array			查询时执行查询的带数据源的控件，例如用于一个查询条件查询多个表格的内容
query	否	Function			自定义的查询事件,覆盖默认的查询事件
callBeforeQuery	否	Function			查询前的回调,参数为query查询条件
callAfterQuery	否	Function			查询后回调,参数为服务器返回的数据

方法Methods

方法名	功能说明	参数说明	返回值类型	其它说明
getFilter()	获取当前原始的过滤条件		JSON
getFilterFormat()	获取将原始过滤条件转换为规定格式的查询条件	Array
handelReset()	重置查询
handelQuery()	执行查询

插槽slot

插槽名	界面位置及说明	参数
query	在查询器内自定义所有的界面(包括查询和重置按钮)	row:原始JSON过滤条件
append	在查询按钮和重置按钮后部追加的内容

子组件: xquery-item查询项

属性props

参数	必填	数据类型	默认值	可选值	说明
label	是	String			查询器列中前部的文本标签
prop	是	String			查询器列的字段,多个字段以逗号分隔
cols	否	Number	1		该查询列所占的列数
opt	否	String	=	=,!=,>,>=,<,<=,like,like*,*like,*like*,between	查询操作符
initValue	否				默认查询条件值
query	否	Boolean	true	true,false	是否纳入最终SQL查询条件中
trim	否	Boolean	false	true,false	是否将查询值前后空格去掉
trimAll	否	Boolean	false	true,false	是否将查询值中所有空格全部去掉
replace	否	Array			对输入的查询值进行替换（支持正则表达式替换）

插槽slot

插槽名	界面位置及说明	参数
匿名插槽	查询器中列	row:原始JSON过滤条件

例1: 普通查询

另参见源码包中的sys-system(子系统管理)功能组件

<template>
    <x-table-edit :data-source="{head:{module:'sys_system'},option:{privilege:true,keyField:true}}">
        <x-query slot="query">
            <x-query-item prop="sysid" label="系统编号："/>
            <x-query-item prop="name" opt="like" label="系统名称："/>
        </x-query>
        <x-table-column prop="sysid" label="系统编号" width="150"/>
        <x-table-column prop="name" label="系统名称"/>
    </x-table-edit>
</template>

<script>
    export default {
        name: 'xquery-item'
    }
</script>

提示

本例功能为查询组件中的具体查询条目，data-source的配置参数详见dataSource 其中opt确定该次查询为精确查询或者模糊查询,默认为=精确查询（参数有like,=,between,>,<） 说明：下例中系统编号查询的字段为sysid，查询操作符采用默认的=符号；系统名称查询的字段为name，查询操作符采用模糊查询like符号。

例2: 带有选择框的查询组件

另参见源码包中的sys-sql数据源管理功能组件

<template>
    <x-table-edit singleSelect="false" lineNumber="false" :data-source="{head:{module:'sys_system'},option:{privilege:false,keyField:true}}">

        <x-query slot="query">
            <x-query-item prop="sysid" label="系统编号："/>
            <x-query-item prop="name" opt="like" label="系统名称：">
                <x-select slot-scope="scope" v-model="scope.row.sysid" :data-source="{head:{module:'sys_system'},data:{option:{id:'sysid',label:'sysid'}}}" />
            </x-query-item>
        </x-query>

        <x-table-column prop="sysid" label="系统编号" width="150"/>
        <x-table-column prop="name" label="系统名称"/>
    </x-table-edit>
</template>
<script>
    export default {
        name: 'xquery-item'
    }
</script>

提示

本例功能为查询组件中的具体查询条目，data-source的配置参数详见dataSource

例3: 自定义查询

设置query参数覆盖系统默认的查询。

<template>
    <x-table-edit :data-source="{head:{module:'sys_system'}}">

        <x-query slot="query" :query="query">
            <x-query-item prop="sysid" label="系统编号："/>
            <x-query-item prop="name" opt="like" label="系统名称："/>
        </x-query>

        <x-table-column prop="sysid" label="系统编号" width="150"/>
        <x-table-column prop="name" label="系统名称"/>
    </x-table-edit>
</template>
<script>
    export default {
        name: 'xquery',
              methods:{
                    query(filter){
                       alert("进行查询时可以进行的操作")
                    }
                }
            }
    }
</script>