uniapp微信小程序筛选弹框

### 实现筛选弹框

在 uni-app 微信小程序中实现筛选弹框可以通过 `sl-filter` 组件来完成。此组件允许创建一个带有多种选项的下拉列表，用户可以选择单个或多个条件作为筛选标准。

对于是否允许多选的情况，属性 `isMultiple` 起到了决定作用。当设置为 `true` 时，表示可以选取多项；反之如果设定成 `false` 则仅限于单项选择[^1]。

下面是一个简单的例子展示如何利用该组件构建筛选功能：

<template>
  <view class="content">
    <!-- 筛选按钮 -->
    <button type="primary" @click="openFilter">点击打开筛选</button>

    <!-- 使用 sl-filter 组件 -->
    <sl-filter ref="filter" :list="filterList" @confirm="onConfirm"></sl-filter>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filterList: [
        { name: '价格', subItems: [{name:'0-99'}, {name:'100-199'}], isMultiple: false },
        { name: '品牌', subItems: [{name:'苹果'}, {name:'华为'}], isMultiple: true }
      ]
    };
  },
  methods: {
    openFilter(){
      this.$refs.filter.open();
    },
    onConfirm(data){
      console.log('确认:',data);
    }
  }
}
</script>

上述代码片段定义了一个页面布局，在其中包含了两个分类：“价格” 和 “品牌”。前者不允许多选而后者则相反。当用户按下“点击打开筛选”的按钮之后将会触发筛选界面显示出来，并且一旦选择了某些项并按下了确定键，则会打印所做选择到控制台。

除了基于表单样式的筛选外，还可以考虑采用 tkiTree 来呈现具有层次关系的数据集，比如部门结构或是文件夹路径等场景下的树形选择器。这种类型的控件同样适用于复杂度较高的筛选需求，它不仅能够处理父子节点之间的关联逻辑而且提供了良好的用户体验[^2]。