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

几天前，需要做一个需求：新增一个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开发四）

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