Vue元素实现表格编辑、删除、以及新增行的最优方法

之前已经实现了表格的新增、编辑和删除，在我的上篇文章中写的也比较详细。但是总感觉有点不完美，首先新增了一行以后，必须要双击某一个单元格参能进行内容的输入。从代码上来说，代码量也较大；而且使用的是原生的超文本标记语言标签，有点尴尬。

于是，进一步研以后，进行了一定的优化，直接使用某视频剪辑软件的代码实现，不仅大大减少了代码量，还实现了操作的友好性。下面直接上代码：

一个超文本标记语言部分

这次的优化其实主要在于超文本标记语言部分，直接将某视频剪辑软件的埃尔输入标签或者el-select标签放入表格的每个单元格中。这样就不用去考虑表格内容的编辑问题了。

El-form :型号=' inServForm ' ref=' inServForm '标签-宽度=' 130 px ' size=' small ' El-form-项目标签='输入参数列表prop=' servin ' El-button type=' primary ' @ click=' addRow(InfiledList)'新增/el-button模板埃尔-表格边框：数据=' InfiledList '样式='宽度： 100% ' El-表格-列prop='fildna '标签='名称style=' width:6vw '模板作用域=' scope ' El-input size=' mini ' v-model=' scope。划船。fildna '/El-输入/模板/El-表-列El-表-列prop=' fildtp ' label='类型模板作用域='作用域El-select v-model=' scope。划船。“fildtp”可清除的El-option v-for=' fildtps '中的项目' :键='项目。值“:标签=”项。text“: value=”项。值'/El-选项/El-选择/模板/El-表格-列El-表格-列道具='备注标签='备注模板作用域=' scope ' El-input size=' mini ' v-model=' scope。划船。备注/El-输入/模板/El-表格-列El-表格-列固定='右'标签='操作模板槽-作用域=' scope ' El-button @ click。本地人。protect=' deleteRow(作用域$index，infiledList)' size='small '移除/El-按钮/模板/El-表格-列/El-表格/模板/El-表格-项目/El-表格2数据定义部分

data(){ return { infiled list :[]，fildtps:[{text: '字符，value:'1'}，{text: '数字，value:'2'}]，}3方法部分

methods: { deleteRow(索引，行){//删除改行行。拼接(索引，1);}，addRow(tableData，event){ tableData。push({ fildna : ' '，fildtp: ' '，remark:'' }) }，}4效果图展示

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