插件名称 | vue-visual-filter |
---|---|
发布时间 | 2021年4月20日 |
插件作者 | obadakhalili |
无调解的Vue视觉过滤组件。它是在考虑可定制性的基础上构建的。
设置完成后,就可以开始使用该组件了。在模板中引用组件的名称:
<template>
<vue-visual-filter
:filtering-options="filteringOptions"
@filter-update="captureFilterUpdate"
></vue-visual-filter>
</template>
filteringOptions
Prop它包含两个选项:
data
:存储要过滤的数据的对象数组。定义:interface Data {
name: string
type: "numeric" | "nominal"
values: any[]
}
;[]
methods
:一个对象,其中包含用于过滤数据的方法。定义:
interface Methods {
numeric: Record<string, (cellValue: any, argument: string) => boolean>
nominal: Record<string, (cellValue: any, argument: string) => boolean>
}
filter-update
事件一个事件prop,它在过滤器更新时接收要调用的函数。的功能包含一个参数,ctx
,其具有在-反应性的克隆filter
,和data
对象。
slots
Vue提供了一种称为插槽的内容分发API。并且在这里利用它来构建自定义过滤器,该过滤器的元素和样式由您提供。
例子:
<template>
<vue-visual-filter
:filtering-options="filteringOptions"
@filter-update="captureFilterUpdate"
>
<template #groupTypes="{ groupTypes, group }">
<el-select v-model="group.groupType" size="small">
<el-option
v-for="type in groupTypes"
:key="type"
:value="type"
></el-option>
</el-select>
</template>
<template #filterAddition="{ filterTypes, addFilter }">
<el-dropdown
@command="addFilter"
split-button
trigger="click"
type="primary"
size="mini"
>
<i class="el-icon-plus"></i>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="filter in filterTypes"
:key="filter"
:command="filter"
>
{{ filter }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template #groupDeletion="{ deleteGroup }">
<el-button
@click="deleteGroup"
type="danger"
icon="el-icon-close"
size="mini"
circle
></el-button>
</template>
<template #fieldUpdation="{ fieldNames, condition, updateField }">
<el-select
@change="updateField"
v-model="condition.fieldName"
size="small"
>
<el-option
v-for="name in fieldNames"
:key="name"
:value="name"
></el-option>
</el-select>
</template>
<template
#methodUpdation="{ numericMethodNames, nominalMethodNames, condition }"
>
<el-select
v-if="numericMethodNames"
v-model="condition.method"
no-data-text="No methods"
size="small"
>
<el-option
v-for="method in numericMethodNames"
:key="method"
:value="method"
></el-option>
</el-select>
<el-select
v-else
v-model="condition.method"
no-data-text="No methods"
size="small"
>
<el-option
v-for="method in nominalMethodNames"
:key="method"
:value="method"
></el-option>
</el-select>
</template>
<template #argumentUpdation="{ condition }">
<el-input
v-model="condition.argument"
size="mini"
placeholder="Argument"
:style="{ width: 'auto' }"
></el-input>
</template>
<template #conditionDeletion="{ deleteCondition }">
<el-button
@click="deleteCondition"
type="danger"
icon="el-icon-close"
size="mini"
circle
></el-button>
</template>
</vue-visual-filter>
</template>