基于antd封装的二次业务筛选组件-table-filter

文档地址：https://flowerofsummer.github.io/components/

业务筛选组件

支持各种类型的高级搜索组件

基础用法

• 组件响应式布局，默认显示两行，可以通过 maxLineCount 配置最多显示行数
• 每行个数： 如果含有 time-range，则在<1600,显示 3 个，否则显示 4 个；如果不含有 time-range，则在<1600,显示 4 个，否则显示 5 个；每行固定显示几个也可以自己配置 filterCount,默认值即是前面的 [3, 4, 5]
• label：默认 label 110px（约 6 个中文字符，超出…tooltip 显示），固定宽度也可以自己配置 labelWidth

<template>
  <div>
    <table-filter
      :items="fileds"
      :filter-count="[4,5,6]"
    />
  </div>
</template>
<script lang="ts" setup>
const fileds = [
  {
    label: 'ip',
    prop: 'searchIpRef',
    type: 'textarea',
    defaultValue: '',
    customAttrs: {
      placeholder: '支持多个IP, 一行一个',
      allowClear: true
    }
  }, {
    label: '标签',
    prop: 'searchTag',
    type: 'select',
    // defaultValue: [],
    options: [
      {
        value: '',
        label: '所有'
      },
      {
        value: 'RUNNING',
        label: '运行中'
      },
      {
        value: 'TERMINATED',
        label: '已关机',
      },
      {
        value: 'CREATE_FAIL',
        label: '创建失败',
      },
    ],
    customAttrs: {
      placeholder: '请选择'
    }
  }, {
    label: '名称',
    prop: 'name2',
    type: 'tree-select',
    defaultValue: [],
    options: [
      {
        value: 'RUNNING',
        label: '运行中'
      },
      {
        value: 'TERMINATED',
        label: '已关机',
      },
      {
        value: 'CREATE_FAIL',
        label: '创建失败',
      },
    ],
    customAttrs: {
      placeholder: '请选择'
    }
  }, {
    label: '名称',
    prop: 'name3',
    type: 'textarea',
    defaultValue: '',
    customAttrs: {
      placeholder: '支持多个IP',
      allowClear: true
    }
  },
  {
    label: '时间',
    prop: 'time',
    type: 'time-range',
    defaultValue: []
  },
  {
    label: '名称',
    prop: 'name5',
    type: 'input',
    defaultValue: 'test',
    customAttrs: {
      placeholder: '请输入'
    }
  }, {
    label: '名称',
    prop: 'name6',
    type: 'input',
    defaultValue: 'test',
    customAttrs: {
      placeholder: '请输入'
    }
  }, {
    label: '名称',
    prop: 'name7',
    type: 'input',
    defaultValue: 'test',
    customAttrs: {
      placeholder: '请输入'
    }
  }, {
    label: '名称',
    prop: 'name8',
    type: 'input',
    customAttrs: {
      placeholder: '请输入'
    }
  }, {
    label: '名称',
    prop: 'name9',
    type: 'input',
    customAttrs: {
      placeholder: '请输入'
    }
  }, {
    label: '名称',
    prop: 'name10',
    type: 'input',
    customAttrs: {
      placeholder: '请输入'
    }
  }, {
    label: '名称',
    prop: 'name11',
    type: 'input',
    customAttrs: {
      placeholder: '请输入'
    }
  }
]
</script>

YTableFilter

属性

参数	说明	类型	可选值	默认值	是否必填
searchLoading	查询按钮 loading	boolean	-	false	否
isSearchImdate	是否立即搜索	boolean	-	true	否
isShowReset	是否显示重置	boolean	-	true	否
filterCount	自定义 每行显示个数,配置必须 3 位数组	number[]	-	[3,4,5]	否
labelWidth	自定义 label 的宽度	string	-	110px	否
maxLineCount	最多显示行数	bumber	-	2	否

事件

事件名	说明	参数列表	参数说明
onSearch	查询方法	-	-

方法

事件名	说明	参数列表	参数说明
changeFiledData	修改 prop 字段值，清空其他字段值，并搜索	(prop: tring, value: any)	prop: 对应的字段名；value: 对应字段的值

FilterItem

属性（主要针对 select 类型的属性）

参数	说明	类型	可选值	默认值	是否必填
label	筛选名称	string	-	-	是
type	筛选组件类型	string	ComponentType	-	是
prop	绑定字段	string	-	-	是
defaultValue	默认值	[String, Array, Number]	-	-	否
isImdateRequest	是否修改后立即请求	boolean	-	true	否
customAttrs	组件原生属性	Object	-	-	否
options	组件（select/tree-select）绑定 options	Array	-	[]	否
optionsRquest	获取 options 的接口方法	Function	-	-	否
optionsParams	联动的字段(联动请求)	Array	-	[]	否
isFixedDefault	更新 options 后，使用默认值 value	boolean	-	false	否
isInData	options 请求返回数据是否直接在 data 返回	boolean	-	false	否
isShowAll	是否给 options 新增全部选项	boolean	-	true	否
dataFiled	options 数据请求返回在 data 中的字段	string	-	items	否
isDefault0	是否用第一项作为默认值	boolean	-	false	否

componentType

enum ComponentType {
  input = 'input',
  select = 'select',
  'tree-select' = 'tree-select',
  'time-range' = 'time-range',
  textarea = 'textarea'
}