Appearance

Return to top
目录

Filter 筛选器

为什么使用？

  • 采用JS配置方式生成筛选表单，大部分情况下会比写html稍微方便一点点
  • 自动布局，默认遵循当前ERP每行5个表单元素的规则，同时提供了参数配置该项
  • 提供了trim配置，输入框默认会被trim处理
  • 提供了transofrm配置，有时表单元素绑定的值并不是搜索的值，比如日期选择器
  • 提供了enterQuery配置（回车触发搜索），默认开启
  • 表单元素提供了缺省的placeholder
  • 表单元素默认传递了clearable
  • 阻止了表单的默认事件，避免当只有一个表单元素，回车时导致页面刷新

基础用法

姓名
vue
<template>
  <!-- 为了更好的演示效果，此处配置了column-count="3" -->
  <jlc-filter :filters="filters" :column-count="3" @query="onQuery"></jlc-filter>
</template>

<script setup lang='ts'>
import { JlcFilter } from '@sz-jlc/admin-vue3'

const filters = [
  {
    label: '姓名',
    key: 'name',
    component: 'el-input' // 默认即为el-input，这行也可以不写
  }
]

const onQuery = (queryParams) => {
  console.log(queryParams)
}
</script>

表单元素的默认值

姓名
vue
<template>
  <jlc-filter :filters="filters" :column-count="3" @query="onQuery"></jlc-filter>
</template>

<script setup lang='ts'>
import { JlcFilter } from '@sz-jlc/admin-vue3'

const filters = [
  {
    label: '姓名',
    key: 'name',
    value: '嘉立创'
  },
]

const onQuery = (queryParams) => {
  console.log(queryParams)
}
</script>

表单元素的属性和事件

姓名
vue
<template>
  <jlc-filter :filters="filters" :column-count="3" @query="onQuery"></jlc-filter>
</template>

<script setup lang='ts'>
import { JlcFilter } from '@sz-jlc/admin-vue3'

const filters = [
  {
    label: '姓名',
    key: 'name',
    attrs: {
      placeholder: '输入关键词模糊查找'
    },
    events: {
      focus() {
        console.log('focus')
      }
    }
  },
]

const onQuery = (queryParams) => {
  console.log(queryParams)
}
</script>

其他表单元素

姓名
性别
年龄
生日
vue
<template>
  <jlc-filter :filters="filters" :column-count="3" @query="onQuery"></jlc-filter>
</template>

<script setup lang='ts'>
import { JlcFilter } from '@sz-jlc/admin-vue3'

const genderOptions = [
  { label: '男', value: 1 },
  { label: '女', value: 0 },
]

const filters = [
  {
    label: '姓名',
    key: 'name',
  },
  {
    label: '性别',
    key: 'gender',
    component: 'el-select',
    children: genderOptions.map(item => ({
      component: 'el-option',
      attrs: item
    }))
  },
  {
    label: '年龄',
    key: 'age',
    component: 'el-input-number'
  },
  {
    label: '生日',
    key: 'birthday',
    compoent: 'el-date-picker'
  }
]

const onQuery = (queryParams) => {
  console.log(queryParams)
}
</script>

值转换 transform

上一个示例中包含了一个日期选择器，点击查询的时候发现获得的是一个日期对象; 或许并不是你想要的格式，那么就可以使用transform配置进行转换。

生日
vue
<template>
  <jlc-filter :filters="filters" :column-count="3" @query="onQuery"></jlc-filter>
</template>

<script setup lang='ts'>
import { JlcFilter } from '@sz-jlc/admin-vue3'

const filters = [
  {
    label: '生日',
    key: 'birthday',
    component: 'el-date-picker',
    transform(date?: Date) {
      if (date instanceof Date) {
        return date.toLocaleDateString()
      }
      return date
    }
  }
]

const onQuery = (queryParams) => {
  console.log(queryParams)
}
</script>

FilterItem 插槽

有时仅有的配置无法满足某些场景，那么就可以使用插槽选项来实现更高定制化的效果；
插槽暴露出了一个bindForm，即用于绑定表单的对象（非查询时的表单）；

如果想在外部设置bindForm，可以调用组件的setFilter方法。

部门
vue
<template>
  <jlc-filter :filters="filters" :column-count="3" @query="onQuery">
    <template #department="{ bindForm }">
      <el-input v-model="bindForm.department" placeholder="请选择">
        <template #append>
          <el-button @click="onChooseDepartment()">选择</el-button>
        </template>
      </el-input>
    </template>
  </jlc-filter>
</template>

<script setup lang='ts'>
import { JlcFilter } from '@sz-jlc/admin-vue3'

const filters = [
  {
    label: '部门',
    key: 'department',
    slot: 'department'
  },
]

const onChooseDepartment = () => {
  console.log('选择部门')
}

const onQuery = (queryParams) => {
  console.log(queryParams)
}
</script>

属性

属性名说明类型可选值默认值是否必填
filters筛选项列表FilterItem[]--是
columnCount每行多少个表单元素number-5否

FilterItem

属性名说明类型可选值默认值是否必填
component组件string-el-input否
key 绑定字段string | string[]--是
value 初始值any--否
label表单labelstring--否
type类型，当前仅有一个rangeTimestringrangeTime-否
attrs组件属性object--否
events组件事件object--否
slot插槽string--否
trim是否对查询值进行trim处理boolean-true否
transform查询值转换函数(value: any) => any--否
flatTransform是否拉平转换查询值，当transform返回一个对象时有用boolean-false否
enterQuery回车时是否触发查询boolean-true否
clearable表单值是否可清除boolean-true否
children子元素，通常可用来应对select组件object--否
children.component 子元素的组件名string--否
children.content子元素的内容string--否
children.render子元素的render函数，需要返回一个VNode(bindForm?: object) => VNode--否
children.attrs子元素的属性object--否
children.events子元素的事件object--否

方法

方法名描述参数
query查询
  • queryNow(是否执行查询，会传递给query事件作为回调参数)
setFilter设置表单绑定的值
  • filter(值)
  • queryNow(是否执行查询，会传递给query事件作为回调参数，默认为true)
reset重置
  • queryNow(是否执行查询，会传递给reset事件作为回调参数，默认为true)

事件

事件名说明回调参数
query触发查询时，会在输入框回车、点击查询、外部调用query方法时触发
  • queryParams(查询参数)
  • queryNow(是否执行查询，通过query方法传入的参数)
reset触发重置时，会在点击重置、外部调用reset方法时触发
  • queryParams(查询参数)
  • queryNow(是否执行查询，通过reset方法传入的参数)

插槽

插槽说明
filter-ctrl表单尾部内容，默认为一个查询按钮和一个重置按钮，可接收到query、reset两个方法。

深圳嘉立创前端团队