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>运行效果如下：
点击最后一个按钮，并输入表格信息
点击提交
组件的使用最关键的就是仔细看官网文档，并且自己学会修改
