當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue的增删改查（elementUI）

發布時間：2023/12/8 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue的增删改查（elementUI）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow"><script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body><div id="app"><el-row :gutter="20"><el-col :span="15" :offset="5"><el-card class="box-card"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="搜索"><el-input v-model="form.keycode"></el-input></el-form-item></el-form><el-table :data="findlist" border style="width: 100%"><el-table-column prop="id" label="id" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="sex" label="性別" width="180"></el-table-column><el-table-column prop="phone" label="電話"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" circle @click="editbtn(scope.row,scope.$index)"></el-button><el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id,scope.$index)"></el-button></template></el-table-column></el-table><el-button style="margin-top: 10px;" type="primary" @click="adddialog = true">添加</el-button></el-card></el-col></el-row><el-dialog title="添加用戶" :visible.sync="adddialog" width="30%" :close-on-click-modal="false" @close="addclosedialog"><el-form :model="user" :rules="addformrules" ref="addformref" label-width="70px"><el-form-item label="名字" prop="name"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="性別"><el-radio-group v-model="user.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="手機" prop="phone"><el-input v-model="user.phone"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="adddialog = false">取消</el-button><el-button type="primary" @click="add">確定</el-button></span></el-dialog><el-dialog title="添加用戶" :visible.sync="editdialog" width="30%" :close-on-click-modal="false" @close="editclosedialog"><el-form :model="edituser" :rules="editformrules" ref="editformref" label-width="70px"><el-form-item label="id" prop="id"><el-input v-model="edituser.id" :disabled="true"></el-input></el-form-item><el-form-item label="名字" prop="name"><el-input v-model="edituser.name"></el-input></el-form-item><el-form-item label="性別"><el-radio-group v-model="edituser.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="手機" prop="phone"><el-input v-model="edituser.phone"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editdialog = false">取消</el-button><el-button type="primary" @click="edit">確定</el-button></span></el-dialog></div><script type="text/javascript">var checkMobile = (rule, value, cb) => {// 驗證手機號的正則表達式const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if (regMobile.test(value)) {return cb()}cb(new Error('請輸入合法的手機號碼'))}var vue = new Vue({el: '#app',data: {list: [{ // 列表的信息id: '0',name: '李四弟',sex: '男',phone: '18150026755'},{id: '1',name: '張三姑',sex: '女',phone: '18150027711'},{id: '2',name: '王五叔',sex: '男',phone: '18150027722'}],user: { // 添加用戶的數據id: "",name: '',sex: '男',phone: ''},form: {keycode: '' // 搜索輸入的文字},adddialog: false, // 添加用戶彈框默認隱藏addformrules: { //添加用戶的校驗規則name: [{required: true,message: '請輸入正確的密碼',trigger: 'blur'},{min: 3,max: 5,message: '長度在 3 到 5 個字符',trigger: 'blur'}],phone: [{required: true,message: '請輸入正確的手機號碼',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}],},editdialog: false, // 修改用戶彈窗默認隱藏editformrules: { // 修改用戶校驗規則name: [{required: true,message: '請輸入正確的密碼',trigger: 'blur'},{min: 3,max: 5,message: '長度在 3 到 5 個字符',trigger: 'blur'}],phone: [{required: true,message: '請輸入正確的手機號碼',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}],},edituser: { // 修改用戶信息存放的地方id: "",name: '',sex: '',phone: ''},editIndex: 0 // 修改用戶信息的索引值},methods: {del(id, index) { //刪除用戶信息this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', { //這個是ui庫的校驗規則confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => { //點擊確定后進入這個方法this.list.forEach(value => {if (value.id == id) {this.list.splice(index, 1);}})this.$message({type: 'success',message: '刪除成功!'});}).catch(() => { //點擊取消或者關掉彈窗會進入這個方法this.$message({type: 'info',message: '已取消刪除'});});},add() { // 添加用戶信息this.$refs.addformref.validate( valid => { // 這個是ui庫的校驗規則 valid 為true 說明校驗通過if (!valid) return// 動態賦予id的值獲取到用戶列表最后一個id，讓他加1var id = parseInt(this.list.slice(-1)[0].id) +1;this.user.id = id;this.list.push(this.user); // 再list中最后插入新增的用戶信息this.adddialog = false;})},addclosedialog() { //關閉添加彈窗，讓數值變成空// this.$refs.addformref.resetFields()this.user = {id: "",name: '',sex: '男',phone: ''};},editclosedialog() { // 關閉修改彈窗讓數值變成空// this.$refs.editformref.resetFields()this.edituser = {};},edit() { //修改用戶信息// this.list[this.editIndex] = this.edituser; 這種方法是不行的Vue.set(this.list, this.editIndex, this.edituser); // 這是vue的賦值的方式this.editdialog = false;},editbtn(userInfo, index) { //打開修改用戶信息彈窗this.editdialog = true;this.editIndex = index;this.edituser = userInfo;}},computed: { // 這個是計算屬性findlist() { // 用來返回名字匹配的數據return this.list.filter(value => {return value.name.indexOf(this.form.keycode) != -1;})}}})</script></body> </html>

增加

修改

查詢

刪除

總結

以上是生活随笔為你收集整理的vue的增删改查（elementUI）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SPOJ694 SPOJ705 ——不
下一篇： Vue 引入 icon 图标