筛选组件

组件名称

CFilter - 用于页面筛选条件的组件

组件说明

该组件用于实现页面筛选功能，包含顶部筛选条和展开的更多筛选抽屉，支持多种筛选控件类型，包括选择器、日期范围、单选和输入框等。

使用方法

<CFilter
  :filterData="filterData"
  :bar="barConfig"
  :items="itemsConfig"
  :selectOptions="selectOptions"
  :onChange="handleFilterChange"
/>

属性说明

| onChange | Function | - | 筛选变化时的回调函数 |

子组件说明

CFilter组件包含以下子组件：

1. CFilterSelect - 下拉选择组件
2. CFilterDateRange - 日期范围选择组件
3. CFilterRadio - 单选组件
4. CFilterInput - 输入框组件

配置项说明

bar 配置项

顶部筛选条配置，支持类型：

{
  type: 'select', // 类型：select/dateRange/input
  label: '状态', // 显示的标签
  name: 'status', // 字段名称
  cancelable: true // 是否可取消选择
}

items 配置项

更多筛选项配置数组：

[
  {
    type: 'select', // 类型：select/dateRange/radio/input
    label: '会员类型', // 显示的标签
    name: 'memberType', // 字段名称
  },
  {
    type: 'dateRange',
    label: '日期范围',
    name: 'dateRange'
  }
]

selectOptions 配置项

选项数据配置：

{
  status: [
    { label: '全部', value: '' },
    { label: '正常', value: 1 },
    { label: '停用', value: 0 }
  ],
  memberType: [
    { label: '全部', value: '' },
    { label: '普通会员', value: 'normal' },
    { label: 'VIP会员', value: 'vip' }
  ]
}

使用示例

<template>
  <view class="page">
    <CFilter
      :filterData="filterData"
      :bar="barConfig"
      :items="itemsConfig"
      :selectOptions="selectOptions"
      :onChange="handleFilterChange"
    />
    
    <!-- 列表内容 -->
    <view class="list">
      <!-- 根据筛选结果显示内容 -->
    </view>
  </view>
</template>

<script>
import { CFilter } from '@components/plugins/filter';

export default {
  components: {
    CFilter
  },
  data() {
    return {
      // 筛选数据
      filterData: {
        status: 1,
        memberType: '',
        dateRange: '',
        keyword: ''
      },
      // 顶部筛选条配置
      barConfig: {
        type: 'select',
        label: '状态',
        name: 'status',
        cancelable: false
      },
      // 更多筛选项配置
      itemsConfig: [
        {
          type: 'select',
          label: '会员类型',
          name: 'memberType'
        },
        {
          type: 'dateRange',
          label: '创建日期',
          name: 'dateRange'
        },
        {
          type: 'input',
          label: '关键字',
          name: 'keyword'
        }
      ],
      // 选项数据
      selectOptions: {
        status: [
          { label: '全部', value: '' },
          { label: '正常', value: 1 },
          { label: '停用', value: 0 }
        ],
        memberType: [
          { label: '全部', value: '' },
          { label: '普通会员', value: 'normal' },
          { label: 'VIP会员', value: 'vip' }
        ]
      }
    }
  },
  methods: {
    // 筛选变化回调
    handleFilterChange(filterData) {
      console.log('筛选条件变化:', filterData);
      // 根据筛选条件获取数据
      this.getListData(filterData);
    },
    
    // 获取列表数据
    getListData(params) {
      // 请求数据
    }
  }
}
</script>

注意事项

1. 筛选条（bar）只能配置一个筛选项
2. 抽屉式筛选（items）可以配置多个筛选项
3. 每个筛选项的类型（type）必须与组件类型匹配
4. select和radio类型的选项必须在selectOptions中配置对应的选项数据