vue元素实现表格新增、编辑、删除功能

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

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

一个超文本标记语言部分：

El-button type=' success ' @ click=' addRow(tableData)'新增/El-button模板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=' desc ' label=' desc '操作宽度='120 '模板slot-scope=' scope ' El-button @ click。本地人。protect=' deleteRow(作用域$index，tableData)类型="文本"大小="小"移除/El-按钮/模板/El-表格-列/El-表格/模板2样式部分

风格。埃尔表。警告——排{背景：旧花边；} .埃尔表成功-行{背景： # f0f 9eb} .单元格-编辑-颜色{ color : # 2d b7f 5 font-weight :粗体；} .单元格编辑输入埃尔.输入，El-input _ _ inner { width :100 px；} .单元格图标{ cursor : pointer color : # fff }/style 3 . data定义：

规则： {文件名： [{必需的d :为真，消息： '请输入文件路径，trigger: 'blur' } ]，policyfilename :[{必需： 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下的包括scmType: ' '，版本： ' ',地址： '' }，tableData: [{ name: 'aa '，xpath: 'bb '，desc: 'cc '，值： 'dd '，defVal: 'ee' }，{ name: 'aa1 '，xpath: 'bb1 '，desc: 'cc1 '，值： 'dd1 '，具体方法：

删除行（索引，行){//移除一行行。拼接(索引，1);//删掉该行}，addRow(tableData，event){//新增一行//之前一直想不到怎么新增一行空数据，最后幸亏一位朋友提示：表格新增一行，其实就是源数据的新增，从源数据入手就可以实现了，于是恍然大悟啊！tableData.push({ name: ' '，xpath: ' '，desc: ' '，value: ' '，defVal:'' }) }，tableDbEdit(行、列、单元格、事件){//编辑单元格数据//当鼠标双击单元格里面具体单元格的时候，即可对数据进行编辑操作，其实就是添加了一个输入框，最终将输入框中的数据保存下来就行了事件。目标。innerHTMl=让CellInput=文档。CreateElement(' Input ')；cellinput . value=cellinput . setattribute(' type '，' text ')；细胞输入。风格。宽度=' 60% '；细胞。append child(CellInput)；cellInput。onbulr=function(){ cell。移除子级(CellInput)；事件。目标。innerhtml=CellInput。价值；};}效果如下

————————分割线———————

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

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

选择选项值='沃尔沃'沃尔沃/选项选项值='萨博'萨博/选项选项值='奔驰'奔驰/选项选项值='奥迪'奥迪/选项/选择那么，我的修改之后的编辑方法如下：

tableDbEdit(行、列、单元格、事件){事件。目标。innerhtml=让cellInput=let name=column。财产。trim()；//拿到当前的属性值//新建一个选择权元素让选项=文档。创建元素('选项')让选项2=文档。如果(name==' fildtp '){ CellInput=document)，则创建元素(' option ')。创建元素(' select ')；//为选择权赋值和内容option.value=' 1option.text='字符；备选方案2。值=' 2 '；option2.text='数字；//将选择权元素直接添加为子元素cellInput.appendChild(选项);cellInput.appendChild(选项2);细胞。append child(CellInput)；cellInput。onbulr=function(){ cell。移除子级(CellInput)；//将单元格的内容填充为所选中元素的内容，而不是值事件。目标。innerhtml=CellInput。选择选项[0].文本；//将所选中元素的值赋给该行的值，每个属性都执行一次赋值，那么在最终提交表单的时候，就能保证当前表的值传到后端划船。fildtp=CellInput。价值；} } else if(name==='必须是TG '){ CellInput=document。create ElEMENT(' select ')；option.value=' 1option.text='是；备选方案2。值=' 0 '；option2.text='否；cellInput.appendChild(选项);cellInput.appendChild(选项2);细胞。append child(CellInput)；cellInput。onbulr=function(){ cell。移除子级(CellInput)；事件。目标。innerhtml=CellInput。选择选项[0].文本；划船。必须TG=CellInput。价值；} } else if(name==' loop TG '){ CellInput=document。create ElEMENT(' select ')；option.value=' 1option.text='循环；备选方案2。值=' 0 '；option2.text='非循环；cellInput.appendChild(选项);cellInput.appendChild(选项2);细胞。append child(CellInput)；cellInput。onbulr=function(){ cell。移除子级(CellInput)；事件。目标。innerhtml=CellInput。选择选项[0].文本；划船。循环TG=CellInput。价值；};}else{调试器CellInput=文档。CreateElement(' Input ')；cellinput . value=cellinput . setattribute(' type '，' text ')；细胞输入。风格。宽度=' 75% '；细胞。append child(CellInput)；cellInput。onbulr=function(){ cell。移除子级(CellInput)；事件。目标。innerhtml=CellInput。价值；if(name===' fild CD '){ row。fild CD=CellInput。价值；} else if(name==' fildna '){ row。fildna=CellInput。价值；} else if(name==' fildln '){ row。fildln=CellInput。价值；} else if(name==' fildde '){ row。fildde=CellInput。价值；} else if(name==' de FLT '){ row。德FLT=细胞输入。价值；} else if(name==' format '){ row。format=CellInput。价值；} else if(name==' enu MCD '){ row。enu MCD=CellInput。价值；} else if(name==' loophd '){ row。loophd=CellInput。价值；} else if(name===' remote '){ row。remote=CellInput。价值；} };}},这种方式，比较详细，也比较容易理解，但是总感觉有点不完美，首先新增了一行以后，必须要双击某一个单元格参能进行内容的输入，不够明显。从代码上来说，代码量也较大；而且使用的是原生的超文本标记语言标签，因此，我在之后对此进行了一个优化，直接使用某视频剪辑软件的代码实现，不仅大大减少了代码量，还实现了操作的友好性。具体实现可以查看的我的文章：Vue元素实现表格的编辑、删除、以及新增行的最优方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。