elementUI搜索条件样式以及vue+element纯前端实现搜索功能【数据量少】

效果图：

HTML 

  
    

      

        
        

          

            

              项   目
            
            

              
            
          
        
        
        

          

            

              计划开始时间
            
            

              
            
          
        
        
        

          

            

              计划结束时间
            
            

              
            
          
        
        
        

          

            

              计划状态
            
            

              
                
                
                
                
                
                
                
              
            
          
        
        
        

          

            

              里程碑
            
            

              
                
                
                
              
            
          
        
        
        

          

            

              责任人
            
            

               
                  
                  
                
            
          
        
        
        

          

            

              项目计划名称
            
            

              
            
          
        
        

          

            搜索
          
        
      
    

scss 

$itemWdth:300px;
.form-container{
  width:$itemWdth;
  margin:15px;
}
.form-box{
  width: 100%;
  margin-bottom:10px;
}
.form-box-label{
  float: left;
  width: 99px;
  height:30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #908888;
  white-space: nowrap;
  border:1px solid #DCDFE6;
  border-right: 0;
  border-radius: 4px 0px 0px 4px;
  text-overflow:ellipsis;
  overflow:hidden;
  background: #f6f7f9;
}
.form-box-item{
  margin-left:100px;
  width:$itemWdth;
  .el-input__inner{
    border-radius: 0 4px 4px 0!important;
  }
  .el-select,.el-input,.el-cascader{
    display: block;
    width: $itemWdth;
  }
  .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
    width: $itemWdth;
  }
}

 

 vue+element纯前端实现搜索功能【数据量少】