4.4.3.5.2 表单编写 在表格的上方，还需要如下图所示的表单：
所以接下来我们需要去ElementUI官网，在表单组件中找到与之类似的示例，加以修改从而打成我们希望的效果，官方示例如下图所示：
所以我们直接拷贝代码主体区域的table组件的上方即可，并且我们需要修改数据绑定的的变量名，最终代码如下：
<el-button type="primary" @click="onSubmit">查询
代码修改前后对比图：
既然我们表单使用v-model进行数据的双向绑定了，所以我们紧接着需要在data中定义searchForm的数据模型，代码如下：
data() { return { tableData: [
],
searchForm:{
name:'',
gender:''
}
}
}AI写代码 javascript 运行
而且，表单的提交按钮，绑定了onSubmit函数，所以我们还需要在methods中定义onSubmit函数，代码如下：
注意的是methods属性需要和data属性同级
methods:{ onSubmit:function(){ console.log(this.searchForm); } } AI写代码 javascript 运行 浏览器打开如图所示：
可以发现我们还缺少一个时间，所以可以从elementUI官网找到日期组件，如下图所示：
参考官方代码，然后在我们之前的表单中添加一个日期表单，具体代码如下：
我们添加了双向绑定，所以我们需要在data的searchForm中定义出来，需要注意的是这个日期包含2个值，所以我们定义为数组，代码如下：
searchForm:{ name:'', gender:'', entrydate:[] } AI写代码 javascript 运行 此时我们打开浏览器，填写表单，并且点击查询按钮，查看浏览器控制台，可以看到表单的内容，效果如下图所示：
此时完整代码如下所示：
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_69748833/article/details/134745326