使用了vue-cli3脚手架

• 有兴趣可以直接复制去看，有时间了在详细描述
• 需引入elementUI
• 加了新需求，需要有搜索功能，有兴趣可以看看
  点击跳转：vue实现表格的添加，删除，修改，搜索。使用了element-ui

		<template>
		 <div>
		   <el-row>
		     <el-col :span="24">
		       <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
		         <el-table-column type="index"></el-table-column>
		         <el-table-column v-for="(item,index) in master_user.columns" :label="item.label" :prop="item.prop" :width="item.width" :key = "index">
		           <template slot-scope="scope">
		             <span v-if="scope.row.isSet">
		               <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[item.prop]">
		               </el-input>
		             </span>
		             <span v-else>{{scope.row[item.prop]}}</span>
		           </template>
		         </el-table-column>
		         <el-table-column label="操作" width="">
		           <template slot-scope="scope">
		             <span v-if="scope.row.isSet" class="el-tag el-tag--success el-tag--small" style="cursor: pointer;" @click.stop="saveRow(scope.row,scope.$index)">
		               保存
		             </span>
		             <span v-else class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="editRow(scope.row,scope.$index)">
		               编辑
		             </span>
		             <span class="el-tag el-tag--danger el-tag--small" style="cursor: pointer;" @click="deleteRow(scope.$index,master_user.data)">
		               删除
		             </span>
		           </template>
		         </el-table-column>
		       </el-table>
		     </el-col>
		     <el-col :span="24">
		       <div class="el-table-add-row" style="width: 99.2%;" @click="add()"><span>+ 添加</span></div>
		     </el-col>
		   </el-row>
		   <span style="color:#fff">{{master_user.data}}</span>
		 </div>
		</template>
		
		<script>
		 export default {
		   name: '',
		   data() {
		     return {
		       master_user: {
		         sel: null, //选中行   
		         columns: [{
		             prop: "deviceType",
		             label: "设备类型",
		             width: 120
		           },
		           {
		             prop: "parentCode",
		             label: "父设备编码",
		             width: 150
		           },
		           {
		             prop: "parentName",
		             label: "父设备名称",
		             width: 120
		           },
		           {
		             prop: "deviceName",
		             label: "设备类别名称",
		             width: 220
		           },
		           {
		             prop: "locationName",
		             label: "位置名称"
		           },
		           {
		             prop: "managementName",
		             label: "管理部门名称"
		           },
		           {
		             prop: "usetName",
		             label: "使用部门名称"
		           },{
		             prop:"specification",
		             label:"规格"
		           },{
		             prop:"model",
		             label:"型号"
		           },{
		             prop:"uspData",
		             label:"投用日期"
		           }, {
		             prop:"originalValue",
		             label:"原值"
		           }
		         ],
		         data: [{ 
		          "deviceType": "1", 
		          "parentCode": "2", 
		          "parentName": "3", 
		          "deviceName": "4", 
		          "locationName": "5", 
		          "managementName": "6", 
		          "usetName": "7", 
		          "specification": "8", 
		          "model": "9", 
		          "uspData": "10", 
		          "originalValue": "11",
		          "isSet": false, } ],
		       },
		     }
		   },
		   methods: {
		     add() {
		       for (let i of this.master_user.data) {
		         if (i.isSet) return this.$message.warning("请先保存当前编辑项");
		       }
		       let j = {  
		          "deviceType": "", 
		          "parentCode": "", 
		          "parentName": "", 
		          "deviceName": "", 
		          "locationName": "", 
		          "managementName": "", 
		          "usetName": "", 
		          "specification": "", 
		          "model": "", 
		          "uspData": "", 
		          "originalValue": "",
		          "isSet": true, };
		       this.master_user.data.push(j);
		       this.master_user.sel = JSON.parse(JSON.stringify(j));
		     },
		     saveRow(row, index) { //保存
		
		        let data = JSON.parse(JSON.stringify(this.master_user.sel));
		        for (let k in data) row[k] = data[k];
		        this.$message({
		            type: 'success',
		            message: "保存成功!"
		        });
		        row.isSet = false;//点击保存后该为false值，隐藏保存按钮，显示编辑按钮
		
		     },
		     editRow(row) { //编辑
		       for (let i of this.master_user.data) {
		         if (i.isSet) return this.$message.warning("请先保存当前编辑项");
		       }
		       this.master_user.sel = row
		       row.isSet = true//点击保存后该为false值，隐藏编辑按钮，显示保存按钮
		     },
		     deleteRow(index, rows) { //删除
		        this.$message({
		          type:'type',
		          message:"删除成功!"
		        })
		       rows.splice(index, 1)
		     }
		   },
		   components: {}
		 }
		</script>
		
		<style>
		 .el-table-add-row {
		   margin-top: 10px;
		   width: 100%;
		   height: 34px;
		   border: 1px dashed #c1c1cd;
		   border-radius: 3px;
		   cursor: pointer;
		   justify-content: center;
		   display: flex;
		   line-height: 34px;
		   color:#fff;
		 }
		
		</style>