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>

运行效果如下：

 点击最后一个按钮，并输入表格信息

 点击提交

组件的使用最关键的就是仔细看官网文档，并且自己学会修改