移动端列表筛选封装

2024/10/26 4:27:04 来源：https://blog.csdn.net/weixin_42079403/article/details/142461800 浏览: 次关键词：移动端列表筛选封装

适合场景：Vue2+vant 移动端项目，数据填充添加全部选项及相关逻辑处理，支持多选、单选以及筛选状态返回

效果图

选中交互

使用说明

<filter-box ref="filterBox" :isMultiple="true" //是否多选:params="waitData" //参数:filterOption="filterOption"//选项数组@submit="handleSearch" //提交的回调@cancel="filterCancel"//关闭的回调
>
</filter-box>//案例
waitData: {自定义参数: 参数,//如分页参数等filterTitle: '全部筛选',hasSearch: false,//选中状态typeIdList: null,tipIdList: null,
},
filterOption: [{title: '文章类型',prop: 'typeIdList',option: []},{title: '文章标签',prop: 'tipIdList',option: []},
],
//@submit和@cancel回调返回的参数是处理完毕的。
//处理完毕的参数，isMultiple为是则返回数组，false则为字符串