sl-filter条件筛选
最后有完整代码
一.使用
-
在script中引用组件
import slFilter from '@/components/sl-filter/sl-filter.vue'; export default { components: { slFilter },
-
HTML中直接使用标签
<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
二.属性
1.标签内属性
2.menuList属性又包含以下属性
* 注 defaultSelectedIndex动态显示数据的时候不能放在menuList的数组中
- detailList属性里面又包含以下属性
- 格式实例
三.配合接口数据设置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>