vue+ElementUI基本使用 数据的增删改查

使用vue+elementUI实现基本的增删改查

<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="8">
        <h3 style="margin-left:30px">{{isEdit?'第'+(index+1)+'条信息编辑':'信息添加'}}h3>
        <el-form ref="studentForm" :model="studentForm" :rules="rules" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="studentForm.name">el-input>
          el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="studentForm.age">el-input>
          el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="studentForm.sex" placeholder="请选择性别">
              <el-option label="男" :value="1">el-option>
              <el-option label="女" :value="0">el-option>
            el-select>
          el-form-item>
          <el-form-item label="分数" prop="score">
            <el-input v-model.number="studentForm.score" placeholder="请输入分数">el-input>
          el-form-item>
          <div style="text-align:center">
            <el-button type="primary" @click="onSubmit('studentForm')">{{isEdit?'提交修改':'添加'}}el-button>
            <el-button @click="onReset('studentForm')">重置el-button>
          div>
        el-form>
      el-col>
      <el-col :span="12" :offset="1">
        <h3>列表信息h3>
        <el-table :data="dataList" border style="width: 100%">
          <el-table-column prop="name" label="姓名" width="180">el-table-column>
          <el-table-column prop="age" label="年龄" width="100">el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">{{scope.row.sex === 1?'男':'女'}}template>
          el-table-column>
          <el-table-column prop="score" label="分数">el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除el-button>
            template>
          el-table-column>
        el-table>
      el-col>
    el-row>
  div>
template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      studentForm: {
        name: "",
        age: "",
        sex: 1,
        score: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        age: [
          {
            required: true,
            type: "number",
            message: "年龄必须为数字值",
            trigger: "blur"
          }
        ],
        score: [
          {
            required: true,
            type: "number",
            message: "成绩必须为数字值",
            trigger: "blur"
          }
        ]
      },
      dataList: [
        { name: "张三", age: 18, sex: 1, score: 90 },
        { name: "李四", age: 28, sex: 1, score: 70 },
        { name: "王五", age: 22, sex: 1, score: 80 }
      ],
      isEdit: false,
      index: null
    };
  },
  methods: {
    onSubmit: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const student = {
            name: this.studentForm.name,
            age: this.studentForm.age,
            sex: this.studentForm.sex,
            score: this.studentForm.score
          };
          if (this.isEdit) {
            this.dataList.splice(this.index, 1, student);
            this.isEdit = false;
          } else {
            this.dataList.push(student);
          }
          this.$refs['studentForm'].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleEdit(index, data) {
      this.index = index;
      this.isEdit = true;
      this.studentForm = this.$utils.deepCopy(data);
    },
    handleDelete(index) {
      this.$confirm("确定删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.dataList.splice(index, 1);
          this.$refs['studentForm'].resetFields();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {}
};
</script>