vue实现筛选功能
来源:互联网 发布:网络教育学籍注册冲突 编辑:程序博客网 时间:2024/05/22 09:46
html
<div class="pop_select" v-show="popup" v-cloak>
<p></p>
<div class="house top">
<span class="blue">已选:</span>
<ul class="choosed">
<li v-for="t in typeList" v-show="typeid==t.type_id">{{t.type_name}} <span class="dele" @click="deleType">X</span></li>
<li v-for="a in areaList" v-show="areaid==a.area_id">{{a.area_name}} <span class="dele" @click="deleArea">X</span></li>
<li v-for="s in designStyleList" v-show="styleid==s.design_style_id">{{s.design_style_name}} <span class="dele" @click="deleStyle">X</span></li>
<li v-for="i in positionids"><span v-for="p in positionList" v-show="i==p.position_id">{{p.position_name}}</span><span class="dele" @click="delePosition(i)">X</span></li>
</ul>
</div>
<div class="house" style="padding-top:10px;">
<span>户型:</span>
<ul>
<li :class="typeid==t.type_id?'blue':''" @click="getType(t)" v-for="t in typeList">{{t.type_name}}</li>
</ul>
</div>
<div class="area" style="padding-top:10px;">
<span>面积:</span>
<ul class="big">
<li v-for="a in areaList"><a @click="getArea(a)" :class="areaid==a.area_id?'blue':''">{{a.area_name}}</a></li>
</ul>
</div>
<div class="style" style="padding-top:10px;">
<span>风格:</span>
<ul class="wid">
<li v-for="s in designStyleList"><a @click="getStyle(s)" :class="styleid==s.design_style_id?'blue':''">{{s.design_style_name}}</a></li>
</ul>
</div>
<div class="site top"style="padding-top:10px;">
<span>位置:</span>
<ul>
<li v-for="p in positionList"><a @click="getPosition(p)" :class="positionids[0]==p.position_id || positionids[1]==p.position_id || positionids[2]==p.position_id || positionids[3]==p.position_id || positionids[4]==p.position_id || positionids[5]==p.position_id || positionids[6]==p.position_id || positionids[7]==p.position_id || positionids[8]==p.position_id?'blue':''">{{p.position_name}}</a></li>
</ul>
</div>
<div class="affirm">
<ul>
<li class="lit" @click="changeClo(0)">取消</li>
<li class="lit" @click="changeClo(1)">完成</li>
</ul>
</div>
</div>
获取所选内容
getType:function(t){
vm_case.typeid=t.type_id;
},
deleType:function(){
vm_case.typeid="";
},
getArea:function(a){
vm_case.areaid=a.area_id;
},
deleArea:function(){
vm_case.areaid="";
},
getStyle:function(s){
vm_case.styleid=s.design_style_id;
},
deleStyle:function(){
vm_case.styleid="";
},
getPosition:function(p){
vm_case.positionids.push(p.position_id);
},
delePosition:function(i){
for(var j=0; j<vm_case.positionids.length; j++) {
if(vm_case.positionids[j] == i) {
vm_case.positionids.splice(j, 1);
}
}
},
fliter:function(){
$.ajax({
url:"../houseCase/filtrate.do",
data:{type_id:vm_case.typeid,area_id:vm_case.areaid,design_style_id:vm_case.styleid,position_ids:vm_case.positionids,start_page:0,count_page:6},
type:'post',
success:function(data){
console.log(data);
if(data.status=="SUCCESS"){
vm_case.pageshow=1;
vm_case.caseList=data.data.dataArray;
if(data.data.rows<=6){
vm_case.pageshow=0;
}
}else{
vm_case.pageshow=0;
vm_case.msg="很抱歉,暂无案例!";
vm_case.caseList="";
}
}
});
},
changeClo:function($index){
if($index==1){
vm_case.fliter();
vm_case.popup=false;
}else{
window.location.reload();//取消时:清空筛选内容
}
},
0 0
- vue实现筛选功能
- UISearchDisplayController 实现筛选功能
- jquery 实现筛选功能。
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 通过js实现筛选功能
- 【Vue】Vue-Router2 实现路由功能
- 用Vue实现排序功能
- 五指cms筛选功能的实现
- Android——分类,筛选功能实现
- angular实现商品筛选功能(过滤器)
- EasyUI combotree实现模糊筛选功能
- 筛选功能
- vue开发:vue实现百度搜索下拉提示功能
- 利用VUE框架,实现列表分页功能
- Vue自定义指令实现checkbox全选功能
- 使用Vue-Router 2实现路由功能
- 面向切面编程(AOP)的理解
- 历届试题 危险系数 (蓝桥杯)
- spring源码编译
- Ubuntu的机器如何让beep发声
- javascript 实现全局常量读写方法
- vue实现筛选功能
- Android中保持Service的状态
- 【Java新手笔记五】数据库sql文件导入出错
- docker 笔记一
- KEIL每次都要编译全部文件并且每个文件编译三次
- web开发日语词汇(一)
- 提升管理员权限
- 网易春招编程题2
- Spark-TimeSeries使用方法