filter-field 筛选栏

filter-field 是一个集成了下拉筛选、排序、标签筛选和高级筛选的复合组件。

基础用法

<template>
  <filter-field 
    :params="filterParams" 
    :showSearch="true"
    @confirm="onFilterConfirm"
  >
  </filter-field>
</template>

<script>
export default {
  data() {
    return {
      filterParams: {
        orderBy: '',
        selectTag: {},
        selectBrand: {},
        selectList: []
      }
    }
  },
  methods: {
    onFilterConfirm(params) {
      console.log('筛选参数', params);
    }
  }
}
</script>

Props

参数	说明	类型	默认值
params	筛选参数对象，包含 orderBy, selectTag, selectBrand, selectList 等	Object	{ orderBy: '', selectTag: {}, selectBrand: {}, selectList: [] }
showSearch	是否显示搜索图标	Boolean	false

Events

事件名	说明	回调参数
confirm	点击确认按钮或筛选发生变化时触发	(params: Object)

Slots

插槽名	说明
dropdown-left	下拉菜单左侧自定义内容
dropdown-right	下拉菜单右侧自定义内容
collapse-top	高级筛选弹窗顶部的自定义内容