使用vue+element实现表格的新增、编辑、删除功能（Vue开发二）

几天前，需要做一个需求：新增一个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;
           };
    }

效果如下

转载请注明出处：https://blog.csdn.net/wangjie919/article/details/81604599