Javaweb之Vue组件库Element案例的详细解析

4.4.3.5.2 表单编写

在表格的上方，还需要如下图所示的表单：

所以接下来我们需要去ElementUI官网，在表单组件中找到与之类似的示例，加以修改从而打成我们希望的效果，官方示例如下图所示：

所以我们直接拷贝代码主体区域的table组件的上方即可，并且我们需要修改数据绑定的的变量名，最终代码如下：

 

    
        
    
    
        
            
            
        
    
    
        查询
    

代码修改前后对比图：

既然我们表单使用v-model进行数据的双向绑定了，所以我们紧接着需要在data中定义searchForm的数据模型，代码如下：

 data() {
      return {
        tableData: [
           
        ],
        searchForm:{
            name:'',
            gender:''
        }
      }
    }

而且，表单的提交按钮，绑定了onSubmit函数，所以我们还需要在methods中定义onSubmit函数，代码如下：

注意的是methods属性需要和data属性同级

 methods:{
        onSubmit:function(){
            console.log(this.searchForm);
        }
}

浏览器打开如图所示：

可以发现我们还缺少一个时间，所以可以从elementUI官网找到日期组件，如下图所示：

参考官方代码，然后在我们之前的表单中添加一个日期表单，具体代码如下：

我们添加了双向绑定，所以我们需要在data的searchForm中定义出来，需要注意的是这个日期包含2个值，所以我们定义为数组，代码如下：

 searchForm:{
            name:'',
            gender:'',
            entrydate:[]
}

此时我们打开浏览器，填写表单，并且点击查询按钮，查看浏览器控制台，可以看到表单的内容，效果如下图所示：

此时完整代码如下所示：

​

​

​