uniapp sl-filter条件筛选组件

sl-filter条件筛选

最后有完整代码

一．使用

1. 在script中引用组件

   import slFilter from '@/components/sl-filter/sl-filter.vue';
   export default {
   	components: {
   		slFilter
   	},
   

2. HTML中直接使用标签

   <sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
   

二．属性

​ 1.标签内属性

2.menuList属性又包含以下属性

*​ 注 defaultSelectedIndex动态显示数据的时候不能放在menuList的数组中

3. detailList属性里面又包含以下属性

4. 格式实例

三．配合接口数据设置detailList里面的属性值

1. 获取接口数据

// 获取菜品分类数据
updata() {
	this.$http.get({
		url: '&do=goods&act=goodslist',
	}).then(res => {
		//商品分类信息列表
		console.log('接口菜品分类数组',res.cates);

以下为接口返回的12条菜品分类数据：

2. 把接口返回的这12条数据放进detailList里面

因为detailList里面的值是变化，所以此时应该给detailList赋值为空数组

'detailList': []//选择框 数组

此实例中我们需要用到id和name属性，但是detailList属性名为title和value
所以需要把id和name属性改名为title和value

let cates=res.cates;//定义分类数据
//第一步 改数组 处理分类数据
for (let i in cates) {
	if (cates[i].id) {
		cates[i].value=cates[i].id;//把数组的 id字段改名为value
		cates[i].title=cates[i].name//把字段的 name 改名为title
	}
}

在detailList数组开头加一条空数据，单选不加空数据会报错

//第二步 加条空数据  单选不加一条空数据会报错
cates.unshift({'value':0,'title':'空'})//想数组中开头部分 添加一个元素 1
this.menuList[0].detailList=cates;//把处理后的分类数组 赋值给插件 2

利用JS的findIndex方法回显数据

//第三步  回显 默认值
// 第二部和第三步不可以交换，否则默认选中位置会后移一条数据
// findIndex是JS的一个方法，根据条件查找元素的位置
let index=cates.findIndex((value)=>value.id==this.goods.pcate);//查找默认的分类在分类数组的 索引序号 1
// defaultSelectedIndex动态显示数据的时候不能放在menuList的数组中
this.menuList[0].defaultSelectedIndex=index;//回显 选择框的默认值 2
console.log('修改完成的菜品分类数组',this.menuList[0].detailList,index)

以下为修改后接口返回的数据(其中有一条为手动增加的空数据，所以修改后为13条数据)：
this.goods.pcate是接口返回数据里面的id值

// sl-filter组件事件
result(val) {
	this.goods.pcate = val.single;//选择框取值
	console.log('取值操作',val.single)
},

最终detailList里面的数据为接口里面的数据

完整代码

html

<view class="classify">
	<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
</view>

js

<script>
import slFilter from '@/components/sl-filter/sl-filter.vue';
export default {
	components: {
		slFilter
	},
	data() {
		return {
			themeColor: '#FFC107',// 按钮选中的颜色
			menuList: [{
				'title': '分类',
				'key': 'single',
				'isMutiple': false, //是否多选
				'reflexTitle': true,
				'detailList': [],
			}],
		}
	},
	onLoad(option) {
		this.updata();
	},
	methods: {
		updata() {
			this.$http.get({
				url: '&do=admin_goods&act=goodslist',
			}).then(res => {
				let cates = res.cates; //定义分类数据
				for (let i in cates) {
					if (cates[i].id) {
						cates[i].value = cates[i].id; 
						cates[i].title = cates[i].name 
					}
				}
				cates.unshift({
					'value': 0,
					'title': '空'
				})
				this.menuList[0].detailList = cates;
				let index = cates.findIndex((value) => value.id == this.goods.pcate);
				this.menuList[0].defaultSelectedIndex = index; 
			}).catch(err => {
				console.log('错误提示', err)
			})
		},
		// sl-filter组件事件
		result(val) {
			this.goods.pcate = val.single; //选择框取值
		},
	},
}
</script>