filter-group ​

介绍 ​

该组件常用于一些筛选条件。可以配合不同的UI组件库，采取配置的形式进行渲染如： select， date-picker 等。并转换出用户想要的格式

因为该组件是通过 component vue 的内置组件渲染第三方UI库的组件，这使得 unplugin-vue-components 不会自动引入第三方UI库的对应组件相关Issue，因此你需要手动导入组件。如果在使用改组件之前， unplugin-vue-components 已经自动导入了相关组件，则无需手动导入以下配置。

举个例子：

我想在 filter-group 组件组件中，配置 element-plus 的 el-input 和 el-select 组件时，如果 components.d.ts 是以下配置：

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    PinFilterGroup: typeof import('pinos-ui')['PinFilterGroup']
  }
}

这个时候就需要手动导入 el-input 和 el-select 相关配置

• 新建一个 element-plus 导入文件

// element-plus/index.ts
import { ElSelect, ElOption, ElInput } from 'element-plus'
import type { App } from 'vue'
import 'element-plus/es/components/select/style/css'
import 'element-plus/es/components/option/style/css'
import 'element-plus/es/components/input/style/css'

export default function (app: App) {
  app.component(ElSelect.name, ElSelect)
  app.component(ElOption.name, ElOption)
  app.component(ElInput.name, ElInput)
}

• 在入口文件中使用该配置

// main.ts

import InstallElementPlus from './element-plus/index'
// ...

createApp(App).use(InstallElementPlus)

背景 ​

在我们开发一个后台管理系统的时候，会遇到许多对table列表进行过滤或条件筛选的场景。通常来说，我们往往需要再template中分别写对应的过滤组件如： input， select， date-picker 等，并且还要搜集每个组件的 modelValue，然后组合出一个 object，最后将这个 object 最作为过滤条件传入对应的接口。该组件用配置形式去渲染对应的组件，这样，你只需要维护一个配置项即可。

代码示例 (UI库：element-plus) ​

select ​

select（基础） ​

select（基础-绑定change事件） ​

select（多选） ​

select（自定义） ​

select（分组） ​

select（远程搜索） ​

checkbox ​

checkbox（基础） ​

checkbox（基础-事件绑定） ​

checkbox（自定义） ​

auto-complete ​

auto-complete（基础） ​

auto-complete（自定义） ​

cascader 级联选择器 ​

cascader（基础） ​

cascader（多选） ​

date-picker ​

date-picker(基础) ​

date-picker(时间范围) ​

date-picker(时间范围-设置别名) ​

date-picker(自定义) ​

input ​

input(基础) ​

select-v2 ​

select-v2(基础) ​

select-v2(多选) ​

select-v2(分组) ​

select-v2(自定义) ​

代码示例 (UI库：naive-ui) ​

select ​

select（基础） ​

select（基础-绑定blur事件） ​

select（多选） ​

select（自定义） ​

select（分组） ​

checkbox ​

checkbox（基础） ​

auto-complete ​

auto-complete（基础） ​

auto-complete（自定义） ​

cascader 级联选择器 ​

cascader（基础） ​

cascader（多选） ​

date-picker ​

date-picker(基础) ​

date-picker(时间范围) ​

date-picker(时间范围-设置别名) ​

input ​

input(基础) ​

数据联动 ​

自定义插槽 ​

filterGroup 属性 ​

FilterGroupOption 属性 ​