您的位置:首页 > 产品设计 > UI/UE

vue实现筛选功能

2017-04-24 17:31 417 查看
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({
             
4000
  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();//取消时:清空筛选内容
           }
        },
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: