2条回答 默认 最新
- 猿小白888 2022-08-18 16:00关注
如有帮助,请采纳
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow" > <title>员工增删改查</title> <style> #app{ width:1024px; margin: 0 auto; } .body{ margin-top:20px; } </style> </head> <body> <div id="app"> <h1>员工的增删改查</h1> <div class="head"> <el-row :gutter="20"> <el-col :span="6"> <el-input v-model="user.username" placeholder="请输入姓名"></el-input> </el-col> <el-col :span="6"> <el-input v-model="user.userId" placeholder="请输入工号"></el-input> </el-col> <el-col :span="6"> <el-input v-model="user.age" placeholder="请输入年龄"></el-input> </el-col> <el-col :span="6"> <el-button type="primary" @click="addUser" plain>添加信息</el-button> </el-col> </el-row> </div> <!-- 主体内容 --> <div class="body"> <template> <el-table :data="records" style="width: 100%" width="600" stripe border> <el-table-column label="序号" width="100" align="center"> <template slot-scope="scope"> {{scope.$index + 1 }} </template> </el-table-column> <el-table-column prop="username" label="姓名" align="center"></el-table-column> <el-table-column prop="userId" label="年龄" align="center"></el-table-column> <el-table-column prop="age" label="工号" align="center"></el-table-column> <el-table-column prop="birthday" label="操作" align="center"> <template slot-scope="scope"> <el-button type="danger" @click="delUser(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> </template> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el:'#app', data: function(){ return{ user:{ id:'', username:'', userId: '', age: '', }, records: [ { username: "张三", userId: "003", age: 25 },{ username: "李四", userId: "004", age: 26 }, ], } }, methods:{ //添加 addUser(){ if(!this.user.username){ this.$message({ message: '请输入姓名!', type: 'warning' }); return; } if(!this.user.userId){ this.$message({ message: '请输入工号!', type: 'warning' }); return; } if (!this.user.age) { this.$message({ message: '请输入年龄!', type: 'warning' }); return; } this.records.push(this.user); this.$message.success("员工"+user.username+"已添加"); this.user = { id:'', username:'', userId: '', age: '', }; }, //删除 delUser(idx){ this.$confirm('确认删除此员工信息?') .then(_ => { this.records.splice(idx, 1); this.$message.success("删除成功"); }) .catch(_ => {}); }, }, }) </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥16 mybatis的代理对象无法通过@Autowired装填
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂
- ¥15 wordpress 产品图片 GIF 没法显示
- ¥15 求三国群英传pl国战时间的修改方法
- ¥15 matlab代码代写,需写出详细代码,代价私
- ¥15 ROS系统搭建请教(跨境电商用途)