基于Vue和element-ui的学生信息系统小demo

<template >
  <div>
    <el-row type="flex">
      <el-col :span="10">
        <!-- ref：对虚拟DOM的一种命名 -->
        <el-form ref="formObj" :model="formObj" label-width="80px" :rules="rules">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formObj.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="formObj.age"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="formObj.sex" placeholder="请选择活动区域">
              <!-- 选项使用了v-for循环 -->
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              <!-- <el-option label="女" value="1"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="formObj.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formObj')">创建新用户</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="12">
        <el-table :data="tableData" border height="300" style="width: 100%">
          <!-- 列表头使用了v-for循环 -->
          <el-table-column
            v-for="(item, index) in tableHeader"
            :key="index"
            :fixed="item.fixed"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
          </el-table-column>
          <el-table-column fixed="right" label="删除" width="100">
            <template slot-scope="scope">
              <!-- 通过 Scope, slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
              <el-button type="primary" round size="mini" @click="del(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      rules:{
        name:[
          {required: true, message:'请输入正确的用户名', trigger: 'blur'},
          {pattern:/^[0-9-a-zA-Z]{4,16}/ ,message:'请输入正确的用户名！',trigger:'blur'}
        ]
      },
      options:[
        {
          value:"1",
          label:"男"
        },
        {
          value:"2",
          label:"女"
        }
      ],
      tableHeader: [
        {
          prop: "name",
          label: "姓名",
          fixed: true,
          width: "180",
        },
        {
          prop: "sex",
          fixed: false,
          label: "性别",
          width: "180",
        },
        {
          prop: "age",
          fixed: false,
          label: "年龄",
          width: "180",
        },
        {
          fixed: false,
          prop: "phone",
          label: "手机",
          width: "180",
        },
      ],
      tableData: [
        {
          name: "王小虎",
          sex: "男",
          age: "20",
          phone: "13813988886",
        },
        {
          name: "曾骅",
          sex: "男",
          age: "2",
          phone: "123123123",
        },
        {
          name: "嫂子",
          sex: "女",
          age: "3",
          phone: "123123123123",
        },
        {
          name: "班长",
          sex: "",
          age: "1",
          phone: "13813988886",
        },
      ],
      formObj: {
        name: "",
        age: "",
        sex: "",
        phone: "",
      },
    };
  },
  methods: {
    // 点击删除按钮可以删除对应每一行的数据
    del:function(scope){
      // console.log(scope);
      let _self  =this;
      _self.tableData.splice(scope.$index,1);
    },
    //根据value值查询对应性别字典
    dictionarySex(val){
      let _self = this;
      for(let index in _self.options){
        if(_self.options[index].value ==val){
          return _self.options[index].label
        }
      }
    },
    //新增按钮
    submitForm:function(formName){
      let _self = this;
      // $refs[虚拟DOM名]用来获取虚拟DOM
      //validate()对整个表单进行校验的方法，参数为一个回调函数.该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
      _self.$refs[formName].validate(
        (valid) =>{
          // console.log(valid);
          if(valid){
            //深拷贝一份formObj，防止value值=>lable值后对原来对象的值进行改变
            let formObj = JSON.parse(JSON.stringify(_self.formObj));
            //根据value查找对应的lable值，因为新增的性别数据不是value值，dictionarySex()为自定义的一个查询方法
            formObj.sex = _self.dictionarySex(formObj.sex);
            //新增数据
            _self.tableData.push(formObj);
            // 表单项重新置为空
            _self.formObj.name = '';
            _self.formObj.age = '';
            _self.formObj.sex = '';
            _self.formObj.phone = '';
          }else{
            return false;
          };
        }
      )
    },


  },
};
</script>
<style>
</style>```