advanced-filter 高级筛选

advanced-filter 是一个右侧弹出的高级筛选组件，支持价格区间、多层级分类筛选、单选/多选等功能。

基础用法

<template>
  <advanced-filter
    :show.sync="showFilter"
    :dataList="filterData"
    @confirm="onConfirm"
    @reset="onReset"
  ></advanced-filter>
</template>

<script>
export default {
  data() {
    return {
      showFilter: false,
      filterData: [
        {
          name: '分类',
          key: 'category',
          dataList: [
            { name: '手机', key: 'phone' },
            { name: '电脑', key: 'computer' }
          ]
        }
      ]
    }
  },
  methods: {
    onConfirm() {
      console.log('确认筛选')
      this.showFilter = false
    },
    onReset() {
      console.log('重置筛选')
    }
  }
}
</script>

Props

参数	说明	类型	默认值
show	是否显示筛选弹窗 (支持 .sync)	Boolean	false
title	弹窗标题	String	'筛选'
isCustomList	是否自定义筛选列表 (为 true 时需传入 dataList)	Boolean	false
dataList	筛选列表数据	Array	[]
selectList	默认选中的列表对象	Object	{}
label	显示文本的属性名	String	'name'
keyName	唯一标识的属性名	String	'key'
valueName	值属性名	String	'value'
childrenName	子列表属性名	String	'dataList'
unfoldNameList	默认展开的项的 key 列表	Array/String/Number	[]
accordion	是否开启手风琴模式	Boolean	false
showPrice	是否显示价格区间筛选	Boolean	false
isSingle	是否开启单选模式	Boolean	false

Events

事件名	说明	回调参数
open	弹窗打开时触发	-
close	弹窗关闭时触发	-
reset	点击重置按钮触发	-
confirm	点击确认按钮触发	-
getDateComplete	获取筛选数据完成时触发	list

Slots

插槽名	说明
header	顶部自定义内容
collapse-top	折叠面板上方自定义内容
collapse-bottom	折叠面板下方自定义内容
botttom	底部按钮区域自定义内容