elementUI中使用el-form-item时prop绑定多字段

严格来讲,使用el-form-item时,是无法使用prop绑定多个字段,但业务中的需求是各式各样的,总会遇到这种情况,那就要想办法去实现它,毕竟东西是死人,我们人,是活的,要活学活用。

先上个图看看:

elementUI中使用el-form-item时prop绑定多字段_第1张图片

 上图中省市区联动,还有经纬度,都是需要在同一行内,显示多个控件,并绑定多个字段的。

上代码:


      
        
          
            
          
          
            
          
          
            
              
                
                  
                    
                    
                  
                
              
              
                
                  
                    
                    
                  
                
              
              
                
                  
                    
                    
                  
                
              
            
          
          
            
              
                
                  
                
              
              -
              
                
                  
                
              
            
          
        
        
          
            取消
            提交
          
        
      
    

看起来可能没有什么不同,但细节决定了关键,我是在el-form-item中嵌套了一个el-row分成多列,然后在每列中分别再放置一个el-form-item并且与字段绑定。

但如果只是这样做的话,label前面没有红色的星号,我看到很多人都是直接这样用的,但我比较执拗,查了一下elementUI文档,发现el-form-item标签有一个required属性,试了一下果然可以显示一个红色的星号,至此问题完美解决。

没什么技术含量,只是一些小技巧的组合而已,也只是今天才发现可以如此解决这个问题,在今天之前,其实我也是用其他方法凑合的,不过今天总算找到了正确的解决方案!!!

你可能感兴趣的:(前端脚本,elementui,javascript,前端)