关于vue项目表格可编辑编辑在此记录两个demo,以便于大家学习,两种方式处理的原理有所不同,第一种方式是通过数据控制当前表格是否是编辑状态,第二种则是一种投机,利用elementui选中时候class的变化去控制。第二种方式很简单,但个人认为第一种方式更安全,大家可以细细的品。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html> <html> <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"> <title>vue.js编辑</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .el-table-add-row { margin-top: 10px; width: 100%; height: 34px; border: 1px dashed #c1c1cd; border-radius: 3px; cursor: pointer; justify-content: center; display: flex; line-height: 34px; } </style> </head> <body> <div id="app"> <el-row> <el-col span="24"> <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row> <el-table-column type="index"></el-table-column> <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width"> <template slot-scope="scope"> <span v-if="scope.row.isSet"> <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]"> </el-input> </span> <span v-else>{{scope.row[v.field]}}</span> </template> </el-table-column> <el-table-column label="操作" width="100"> <template slot-scope="scope"> <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)"> {{scope.row.isSet?'保存':"修改"}} </span> <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;"> 删除 </span> <span v-else class="el-tag el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)"> 取消 </span> </template> </el-table-column> </el-table> </el-col> <el-col span="24"> <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div> </el-col> </el-row> </div> <!-- import Vue before Element --> <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> //id生成工具 这个不用看 示例而已 模拟后台返回的id var generateId = { _count: 1, get() { return ((+new Date()) + "_" + (this._count++)) } }; //主要内容 var app = new Vue({ el: "#app", data: { master_user: { sel: null,//选中行 columns: [ { field: "type", title: "远程类型", width: 120 }, { field: "addport", title: "连接地址", width: 150 }, { field: "user", title: "登录用户", width: 120 }, { field: "pwd", title: "登录密码", width: 220 }, { field: "info", title: "其他信息" } ], data: [], }, }, methods: { //读取表格数据 readMasterUser() { //根据实际情况,自己改下啊 app.master_user.data.map(i => { i.id = generateId.get();//模拟后台插入成功后有了id i.isSet = false;//给后台返回数据添加`isSet`标识 return i; }); }, //添加账号 addMasterUser() { for (let i of app.master_user.data) { if (i.isSet) return app.$message.warning("请先保存当前编辑项"); } let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true }; app.master_user.data.push(j); app.master_user.sel = JSON.parse(JSON.stringify(j)); }, //修改 pwdChange(row, index, cg) { //点击修改 判断是否已经保存所有操作 for (let i of app.master_user.data) { if (i.isSet && i.id != row.id) { app.$message.warning("请先保存当前编辑项"); return false; } } //是否是取消操作 if (!cg) { if (!app.master_user.sel.id) app.master_user.data.splice(index, 1); return row.isSet = !row.isSet; } //提交数据 if (row.isSet) { //项目是模拟请求操作 自己修改下 (function () { let data = JSON.parse(JSON.stringify(app.master_user.sel)); for (let k in data) row[k] = data[k]; app.$message({ type: 'success', message: "保存成功!" }); //然后这边重新读取表格数据 app.readMasterUser(); row.isSet = false; })(); } else { app.master_user.sel = JSON.parse(JSON.stringify(row)); row.isSet = true; } } } }); </script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> * { margin: 0; padding: 0 } body { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; overflow: auto; font-weight: 400; -webkit-font-smoothing: antialiased; } .tb-edit .el-input { display: none } .tb-edit .current-row .el-input { display: block } .tb-edit .current-row .el-input+span { display: none } </style> </head> <body> <div id="app"> <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange"> <el-table-column label="日期" width="180"> <template scope="scope"> <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span> </template> </el-table-column> <el-table-column label="姓名" width="180"> <template scope="scope"> <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span> </template> </el-table-column> <el-table-column prop="address" label="地址"> <template scope="scope"> <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span> </template> </el-table-column> <el-table-column label="操作"> <template scope="scope"> <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>--> <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <br>数据:{{tableData}} </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> var app = new Vue({ el: '#app', data: { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] }, methods: { handleCurrentChange(row, event, column) { console.log('改变', row, event, column, event.currentTarget) }, handleEdit(index, row) { console.log('修改', index, row); }, handleDelete(index, row) { console.log('删除', index, row); } } }) </script> </html> |
如果你觉得你想操作的表格不仅仅是如此的简单,那在此可以推荐一个关于vue的相关表格操作插件,官方宣称是无所不能,vxe-table传送门
上一篇:快速在vue项目中使用vue-echarts图表插件
下一篇:JS数组中的一个元素的值改变后,数组其它元素值都跟着变了
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"vue+element-ui简单实现表格可编辑效果"
最新评论