vue+element实现表格新增、编辑、删除功能

前端  /  管理员 发布于 4年前   990

需要做一个需求：新增一个xml文件时，添加数量不确定、属性相同的xml标签，想了想可以用表格做啊，属性相同，使用统一的表头，下面的属性值只是进行增删改不就行了，就类似于mysql给表里填数据一样。

可是目前似乎还没有表格的直接增删改一行的操作，那要怎么实现呢？于是，通过上网以及自己的思考，终于实现了，代码、思路以及效果图如下：

1 html部分：

新增

2 样式部分

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; };}

效果如下

――――――――分割线―――――――C

之前实现的都是input框的方式，昨天又做了个优化，增加了下拉框的方式，并且新增了提交表单时，能够将数据传到后端的功能。

首先我们知道，select标签的格式，比较特殊，没有input那么直接，每次只需要修改，展示它本身的value属性的值就OK了，select的标签格式如下：

VolvoSaabMercedesAudi

那么， 我的修改之后的编辑方法如下：

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+element 模态框表格形式的可编辑表单实现
• Vue+Element实现表格编辑、删除、以及新增行的最优方法
• vue+element-ui实现表格编辑的三种实现方式
• VUE+Element UI实现简单的表格行内编辑效果的示例的代码
• vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
• vue+iview 实现可编辑表格的示例代码
• 对Vue table 动态表格td可编辑的方法详解
• Vue封装的可编辑表格插件方法
• Vue.js实现可编辑的表格