【vue+element-ui】用vue+element-ui实现同学录增删改查

2024-03-03 15:57:10

分三个文件
分别是html，js和css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
  

</head>

<body>
  <div id="app">
    <h2>同学录</h2>
    <el-row :gutter="30">
      <el-col :span="6">
          <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>       
      </el-col>
      <el-col :span="6">
        <el-input v-model="userInfo.gender" placeholder="请输入性别"></el-input>       
      </el-col>
      <el-col :span="6">
        <el-input v-model="userInfo.phoneNumber" placeholder="请输入电话号码"></el-input>       
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="userInfo.birthday"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>    
      </el-col>
    </el-row>

    <el-button type="primary" @click="addUser" class="add-btn">提交</el-button>
    
    <div class="body">
      <template >
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop=""
            type="index"
            label="序号"
            width="180">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别">
          </el-table-column>
          <el-table-column
            prop="phoneNumber"
            label="电话号码">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="操作">            
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="edituser(scope.row,scope.$index)" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.$index)" circle></el-button>
            </template>
            
          </el-table-column>
        </el-table>
      </template>
    </div>

    <el-dialog
      title="编辑用户信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="confirm">
      <span>
        <el-form label-width="80px" :model="editUser">
          <el-form-item label="姓名">
            <el-input v-model="editUser.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="editUser.gender"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="editUser.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker
              v-model="editUser.birthday"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>   
          </el-form-item>         
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  
  
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="main.js"></script>
</body>
</html>

var app = new Vue({
  el:"#app",
  data:function(){
    return{
      input:'',
      userInfo:{
        name:'',
        gender:'',
        phoneNumber:'',
        birthday:'',
      },
      tableData: [{
        name: '荔枝',
        gender: '女',
        birthday:'01.09',
        phoneNumber:'520',
      }
      ],
      dialogVisible:false,
      //谈话的显示
      editUser:{
        name:'',
        gender:'',
        phoneNumber:'',
        birthday:'',
      },
      userIndex:0
    }
  },
  methods:{
    // 增加用户
    addUser: function(){
      if(!this.userInfo.name){
        this.$message({
          message: '请输入姓名',
          type: 'warning'
        });
        return;
      };
      if(!this.userInfo.gender){
        this.$message({
          message: '请输入性别',
          type: 'warning'
        });
        return;
      }
      if(!/^1[3456789]\d{9}$/.test(this.userInfo.phoneNumber)){
        this.$message({
          message: '请输入正确的电话号码',
          type: 'warning'
        });
        return;
      }
      if(!this.userInfo.birthday){
        this.$message({
          message: '请输入生日',
          type: 'warning'
        });
        return;
      }
      this.tableData.push(this.userInfo);
      this.userInfo={
        name:'',
        gender:'',
        phoneNumber:'',
        birthday:'',
      }
    },
    deleteUser: function(index){
      this.$confirm('确认删除？')
        .then(_ => {
          this.tableData.splice(index,1);
        })
        .catch(_ => {});
    },
    edituser:function(item,idx){
      userIndex=idx;
      this.editUser={
        name:item.name,
        gender:item.gender,
        phoneNumber:item.phoneNumber,
        birthday:item.birthday,
      };
      this.dialogVisible=true;
    },
    confirm:function(){
      this.dialogVisible=false;
      Vue.set(this.tableData,this.userIndex,this.editUser);
    }
  }

})

#app {
   width: 1024px;
   margin: 0 auto
}

.add-btn{
  margin-top: 20px;
  width: 100%;
}

.body{
  margin-top: 20px;
  width: 100%;
}

码农公寓

相关文章