Vue组件库Element-常见组件-Form表单

Form表单

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、检验、提交数据

具体关键代码如下：

<template><div><el-row><!-- button 按钮 --><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><br /><!-- Table 表格 --><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table><!-- Pagination 分页 --><el-pagination background layout="sizes, prev, pager, next, jumper, total" @size-change="handleSizeChange"@current-change="handleCurrentChange" :total="totalItems"></el-pagination><!-- Dialog 对话框 --><!-- Table 表格 --><!-- 点击button按钮就会调用click指令，改变dialogTableVisible的值 --><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><!-- :visible.sync控制对话框的展示与隐藏 --><!-- 绑定了v-bind指令 --><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column width="200px" property="address" label="地址"></el-table-column></el-table></el-dialog><br><!-- Dialog 对话框 --><!-- Form 表单 --><!-- 点击button按钮就会调用click指令，改变dialogTableVisible的值 --><el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button><el-dialog title="Form表单" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><!-- :model="form"绑定form数据模型 --><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1"style="width: 100%;"></el-date-picker><!-- v-model指令绑定的数据一定要在数据模型中声明出来 --></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
export default {data() {return {form: {name: '',region: '',date1: '',date2: '',},gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},],dialogTableVisible: false,/*  默认值为：false对话框不显示 */dialogFormVisible: false,tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',},],totalItems: 1000,};},methods: {handleSizeChange(val) {alert('数据显示容量为:' + val);},handleCurrentChange(val) {alert('当前页码数据为:' + val);},onSubmit() {// 将对象object转换为json数据alert(JSON.stringify(this.form))}},
};
</script><style></style>

运行效果如下：