适合场景: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则为字符串
源码
附件