vue+element实现表格新增、编辑、删除功能
程序员文章站
2023-08-17 21:27:12
需要做一个需求:新增一个xml文件时,添加数量不确定、属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于my...
需要做一个需求:新增一个xml文件时,添加数量不确定、属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样。
可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于实现了,代码、思路以及效果图如下:
1 html部分:
<el-button type="success" @click="addrow(tabledata)">新增</el-button> <template> <el-table :data="tabledata" style="width: 100%" max-height="250" @cell-dblclick="tabledbedit"> <el-table-column prop="name" label="name" width="150"> </el-table-column> <el-table-column prop="xpath" label="xpath" width="120"> </el-table-column> <el-table-column prop="desc" label="desc" width="120"> </el-table-column> <el-table-column prop="value" label="value" width="120"> </el-table-column> <el-table-column prop="defval" label="defval" width="300"> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button @click.native.prevent="deleterow(scope.$index, tabledata)" type="text" size="small"> 移除 </el-button> </template> </el-table-column> </el-table> </template>
2 样式部分
<style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } .cell-edit-color{ color:#2db7f5; font-weight: bold; } .cell-edit-input .el-input, .el-input__inner { width:100px; } .cell-icon{ cursor:pointer; color:#fff; } </style>
3.data定义:
rules: { filename: [ { required: true, message: '请输入文件路径', trigger: 'blur' } ], policyfilename: [ { required: true, message: '请输入文件路径', trigger: 'blur' } ], parmna: [ { required: true, message: '请输入数据字段名称', trigger: 'blur' } ], remark: [ { required: true, message: '请输入分组类型名称', trigger: 'blur' } ] }, activename: 'include', tabposition: 'left', dialogformvisible: false, formquery:[], serverform: { filename: '', policyfilename: '',//policy下的include scmtype: '', version: '', address: '' }, tabledata: [{ name: 'aa', xpath: 'bb', desc: 'cc', value: 'dd', defval: 'ee' }, { name: 'aa1', xpath: 'bb1', desc: 'cc1', value: 'dd1', defval: 'ee1' }]
4 具体方法:
deleterow(index, rows) {//移除一行 rows.splice(index, 1);//删掉该行 }, addrow(tabledata,event){//新增一行 //之前一直想不到怎么新增一行空数据,最后幸亏一位朋友提示:表格新增一行,其实就是源数据的新增,从源数据入手就可以实现了,于是 恍然大悟啊! tabledata.push({ name: '', xpath: '',desc:'',value:'',defval:'' }) }, tabledbedit(row, column, cell, event) {//编辑单元格数据 //当鼠标双击单元格里面具体单元格的时候,即可对数据进行编辑操作,其实就是添加了一个输入框,最终将输入框中的数据保存下来就行了。 event.target.innerhtml = ""; let cellinput = document.createelement("input"); cellinput.value = ""; cellinput.setattribute("type", "text"); cellinput.style.width = "60%"; cell.appendchild(cellinput); cellinput.onblur = function() { cell.removechild(cellinput); event.target.innerhtml = cellinput.value; }; }
效果如下
————————分割线———————–
之前实现的都是input框的方式,昨天又做了个优化,增加了下拉框的方式,并且新增了提交表单时,能够将数据传到后端的功能。
首先我们知道,select标签的格式,比较特殊,没有input那么直接,每次只需要修改,展示它本身的value属性的值就ok了,select的标签格式如下:
<select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select>
那么, 我的修改之后的编辑方法如下:
tabledbedit(row, column, cell, event) { event.target.innerhtml = ""; let cellinput = ''; let name = column.property.trim();//拿到当前的属性值 //新建一个option元素 let option = document.createelement('option') let option2 = document.createelement('option') if(name==="fildtp"){ cellinput = document.createelement("select"); //为option赋值和内容 option.value="1"; option.text="字符"; option2.value="2"; option2.text="数字"; //将option元素直接添加为子元素 cellinput.appendchild(option); cellinput.appendchild(option2); cell.appendchild(cellinput); cellinput.onblur = function() { cell.removechild(cellinput); //将单元格的内容填充为所选中元素的内容,而不是值 event.target.innerhtml = cellinput.selectedoptions[0].text; //将所选中元素的值赋给该行的值,每个属性都执行一次赋值,那么在最终提交表单的时候,就能保证当前表的值传到后端 row.fildtp=cellinput.value; } }else if(name==="musttg"){ cellinput = document.createelement("select"); option.value="1"; option.text="是"; option2.value="0"; option2.text="否"; cellinput.appendchild(option); cellinput.appendchild(option2); cell.appendchild(cellinput); cellinput.onblur = function() { cell.removechild(cellinput); event.target.innerhtml = cellinput.selectedoptions[0].text; row.musttg=cellinput.value; } }else if(name==="looptg"){ cellinput = document.createelement("select"); option.value="1"; option.text="循环"; option2.value="0"; option2.text="非循环"; cellinput.appendchild(option); cellinput.appendchild(option2); cell.appendchild(cellinput); cellinput.onblur = function() { cell.removechild(cellinput); event.target.innerhtml = cellinput.selectedoptions[0].text; row.looptg=cellinput.value; }; }else{ debugger cellinput = document.createelement("input"); cellinput.value = ""; cellinput.setattribute("type", "text"); cellinput.style.width = "75%"; cell.appendchild(cellinput); cellinput.onblur = function() { cell.removechild(cellinput); event.target.innerhtml = cellinput.value; if(name==="fildcd"){ row.fildcd=cellinput.value; }else if(name==="fildna"){ row.fildna=cellinput.value; }else if(name==="fildln"){ row.fildln=cellinput.value; }else if(name==="fildde"){ row.fildde=cellinput.value; }else if(name==="defult"){ row.defult=cellinput.value; }else if(name==="format"){ row.format=cellinput.value; }else if(name==="enumcd"){ row.enumcd=cellinput.value; }else if(name==="loophd"){ row.loophd=cellinput.value; }else if(name==="remark"){ row.remark=cellinput.value; } }; } },
这种方式,比较详细,也比较容易理解,但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入,不够明显。从代码上来说,代码量也较大;而且使用的是原生的html标签,因此,我在之后对此进行了一个优化,直接使用vue的代码实现,不仅大大减少了代码量,还实现了操作的友好性。具体实现可以查看的我的文章:vue+element实现表格的编辑、删除、以及新增行的最优方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Vue实现表格批量审核功能实例代码
下一篇: Vue 组件修改根实例的数据的方法
推荐阅读
-
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
-
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
-
使用DataList实现 加入购物车,编辑,删除,更新,取消功能。要求连一个产品表。
-
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
-
Vue+Element实现表格编辑、删除、以及新增行的最优方法
-
vue+element实现表格新增、编辑、删除功能
-
jQuery实现为table表格动态添加或删除tr功能示例
-
Angular实现较为复杂的表格过滤,删除功能示例
-
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
-
jQuery实现用户信息表格的添加和删除功能