无调解的Vue视觉过滤组件。它是在考虑可定制性的基础上构建的。

先决条件

• 节点版本12.0.0或更高版本。
• NPM。

安装和设置组件

• @ visual-filter / vue2
• @ visual-filter / vue3

用法（对于@ visual-filter/vue2和@ visual-filter/vue3）

设置完成后，就可以开始使用该组件了。在模板中引用组件的名称：

<template>
  <vue-visual-filter
    :filtering-options="filteringOptions"
    @filter-update="captureFilterUpdate"
  ></vue-visual-filter>
</template>

filteringOptionsProp

它包含两个选项：

• 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>

---

官网：https://github.com/obadakhalili/vue-visual-filter