# 筛选项组件 TableFilters

注意

筛选项有涉及远程请求，统一在focus事件（获取焦点的时候触发请求）
请求地址统一 src/api/public-api.js 文件中
请求统一放在 src/utils/filters-method.js 文件中，例：

import * as publicApi from '@/api/public-api'
export function filtersRequest() {
  return {
    async remoteMethod(q, column, columnData) {
      // q: 用户输入的值
      // column: 当前筛选项的prop
      // columnData: 当前筛选项的所有属性
      if (column == 'push_admin_id') {
        let params = {
          limit: 500,
          q,
          departments: [3],
          status: columnData.status,
          member: columnData.member ? store.getters.userInfo.view : undefined
        }
        const { code, data } = await publicApi.find(params)

        if (!code) {
          const list = utils.coverDict({
            rows: data.rows,
            value: 'id',
            label: 'name'
          })
          this.$set(this.dictMap, column, list)
        }
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 基础显示

::: demo <<< @/src/demos/table-filters-demo/index.vue :::

# 参数说明

参数	说明	类型	可选值	默认值
filtersMap	所有筛选项的配置	Array	—	[]
filterForm	筛选项绑定值得合集	Object	—	{}
setShow	是否显示表头设置按钮	Boolean	—	false
parentDictMap	select选择项得合集，与filtersMap中prop相对应	Array	—	[]

# filtersMap 配置项

可使用与Element-ui对应的属性，组件内部使用v-bind添加对应的属性

参数	说明	类型
prop	v-model绑定得值，绑定来源filterForm	String
style	添加样式	String
label	显示的标题	String
showType	对应筛选项得type，当前有`select` `tree` `date-picker` `input` `cascader`	String
form_class	添加calss	String

# 事件说明

时间名	说明	参数
resize	展开收起时触发用于更新页面对应高度	-
change	操作筛选项之后触发	{ filterForm, prop }
setHeader	点击表头设置按钮时触发	-

表格组件 TableView →