filter-fields字段Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 查询字段名 | string | —— | —— |
| model | 查询字段 | string/number | —— | —— |
| initValue | 查询字段初始值 | string/number | —— | —— |
| type | 查询框组件类型 | string | input/select/selectVdc/ selectUser/datePicker | input |
| show | 是否显示 如果是function，参数为model的集合 | boolean/function | —— | true |
| async | 下拉框options 是否从后台获取，如果设置true，则options必须是一个async类型的function | boolean | true/false | —— |
| linkage | 级联的model | array | —— | —— |
| optionsConfig | 下拉框options对应的参数名 | object | —— | {label：'name', value: 'id'} |
| options | 下拉框所需的options 如果是function，参数为model的集合 | array/function | —— | —— |
| params | 选择vdc以及用户弹窗 接口所需的参数 如果是function，参数为model的集合 | array/function | —— | —— |
| attrs | 传给element组件的原生参数 | object | —— | —— |
如果参数type为datePicker，则日期框的默认配置如下
{
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'timestamp'
}
以上配置代表了日期弹窗为单个日期，如若选择日期范围，可以在attrs字段中（传给element组件的原生参数）更改日期框type类型。如：
{
type: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'timestamp'
}
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 查询条件改变时触发 | 一个对象，model数据集合 |
| filter-change | 某一个查询条件改变时触发，比如添加一个vdc，选择一个资源域 | key：哪个字段变了 value:当前变化字段的值 model：model数据集 |
filter-change触发的条件一定是用户操作了某一个条件，级联时只触发当前操作的那一个条件，不能触发联动的条件
具体用法
<template>
<filter-box :filter-fields="filterFields" @change="handleFilterChange"></filter-box>
</template>
<script>
import FilterBox from './components/FilterBox'；
export default {
components: {
FilterBox
},
data() {
return {
filterFields: [
{
label: '名称',
model: 'name',
type: 'input'
}，
{
label: '资源域',
model: 'domainId',
type: 'select'，
show：Vue.isSuperadmin,
linkage: ['runtimeId', 'vdcId', 'userId', 'namespaceId'],
async: true,
optionsConfig: {
label: 'domainName',
value: 'domainId'
},
options: async () => {
return await this.getDomainList()
}
},
{
label: '集群',
model: 'runtimeId',
type: 'select'，
linkage: ['namespaceId'],
async: true,
optionsConfig: { // 组件默认值就是name和id此处可不配置
label: 'name',
value: 'id'
},
options: async (model) => {
return await this.getRuntimeList(model)
}
}，
{
label: '虚拟数据中心',
model: 'vdcId',
type: 'selectVdc'，
linkage: ['userId', 'namespaceId'],
params: model => {
return {
domainId: model.domainId,
platform: 'CONTAINER'
}
}
},
{
label: '用户',
model: 'userId',
type: 'selectUser'，
params: model => {
return {
domainId: model.domainId,
vdcId: model.vdcId
}
}
},
{
label: '应用空间',
model: 'namespaceId',
type: 'select'，
async: true,
optionsConfig: { // 组件默认值就是name和id此处可不配置
label: 'namespace',
value: 'id'
},
options: async (model) => {
return await this.getNamespaceList(model)
}
}
]
}
},
methods: {
async getDomainList() {
// ajax请求的数据，需return出请求值
}，
async getNamespaceList(model) {
// model为组件内部暴露出的数据集，级联时model会变，这里会自动调接口
// ajax请求的数据，需return出请求值
const {resData} = await this.$ajax({
path: '',
data: {
pageSize: -1,
...model
}
})
return resData
}，
async getRuntimeList(model) {
// model为组件内部暴露出的数据集，级联时model会变，这里会自动调接口
// ajax请求的数据，需return出请求值
},
handleFilterChange() {
// 查条件变了这里直接调用查询列表接口
}
}
}
</script>
