信息列表页

1. 信息列表页
2. 新增修改弹窗复用
3. 增删改查基础实现

1 信息列表页

1. 写表格

<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" algin="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" algin="center">
        </el-table-column>
        <el-table-column prop="sex_text" label="性别" algin="center">
        </el-table-column>
        <el-table-column prop="age" label="年龄" algin="center">
        </el-table-column>
        <el-table-column prop="father" label="父亲姓名" algin="center">
        </el-table-column>
        <el-table-column prop="mother" label="妈妈" algin="center">
        </el-table-column>
        <el-table-column prop="address" label="家庭地址" algin="center">
        </el-table-column>
        <el-table-column prop="time" label="入校时间" algin="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" algin="center">
        </el-table-column>

        <el-table-column label="操作" algin="center">

            <template slot-scope="scope">
                <el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)">
                </el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: []

        }
    },
    methods: {
        edit() {

        },
        del() {

        }
    }
}
</script>
<style lang="scss">
</style>

2. 获取数据
   检测接口步骤
   a 打开postman
   b 输入接口地址，改变请求方式
   c header–>添加token
   添加弹窗样式
   https://element.eleme.cn/#/zh-CN
   添加日期选择器

添加弹窗

  <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="form.sex" label="1">男</el-radio>
                    <el-radio v-model="form.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
                    <el-input v-model="form.father" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
                    <el-input v-model="form.mather" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
                    <el-date-picker
                     v-model="form.time" 
                    fromat="yyyy 年 MM 月 dd 日"
                    value-format=" yyyy-MM-dd"
                    type="date" 
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure('form')">确 定</el-button>
            </div>
        </el-dialog>