vue+element表格使用（单元格内编辑、表格后新增一行、删除表格行）

element组件生成表格

前端使用element组件实现表格创建，开发文档中有一个单元格点击事件cell-dblclick——当某个单元格双击时触发该事件。通过使用该事件实现单元格可编辑。表格后新增一行的逻辑很简单，直接添加一行表格数据就行。删除表格行的逻辑也很简单，通过获取选中行和表格数据进行比较，如果相等（即被选中）则从tableData中删除该条数据。

具体实现逻辑如下：

<div id="app">
  <template>
    <el-table
    :data="tableData"
    border
    @selection-change="selectionChangeHandle"
    @cell-dblclick="celledit"
    style="width: 671px;height:243px">
		<el-table-column>
			<template slot="header" slot-scope="scope">
				<el-button @click="addRow()">新增</el-button>			
				<el-button @click="batchDelete(tableDataSelections)">删除</el-button>
			</template>
			<el-table-column type="selection" width="55"></el-table-column>
		    <el-table-column type="index" ></el-table-column>
		    <el-table-column
		      prop="date"
		      label="日期"
		      width="180">
		       <template slot-scope="scope">
		         <el-date-picker v-if="scope.row.date.edit"
		          v-model="scope.row.date.value"
		          ref="date"
		          style="width: 100%"
		          type="date"
		          value-format="yyyy-MM-dd"
		          @blur="scope.row.date.edit = false">
		        </el-date-picker>
		         <span v-else>{{ scope.row.date.value }}</span>
		      </template>
		  </el-table-column>
		  <el-table-column prop="name" label="姓名" width="180" edit="false">
		    <template slot-scope="scope">
		         <el-input v-if="scope.row.name.edit"
		          ref="name"
		          v-model="scope.row.name.value"
		          style="width: 100%"
		          @blur="scope.row.name.edit = false">
		        </el-input>
		         <span v-else>{{ scope.row.name.value }}</span>
		      </template>
		  </el-table-column>
		  <el-table-column prop="address" width="260" label="地址">
		    <template slot-scope="scope">
		         <el-input v-if="scope.row.address.edit"
		          ref="address"
		          v-model="scope.row.address.value"
		          style="width: 100%"
		          @blur="scope.row.address.edit = false">
		        </el-input>
		         <span v-else>{{ scope.row.address.value }}</span>
		      </template>
		  </el-table-column>
	  </el-table-column>
  </el-table>
  </template>
</div>

对应的实现方法

export default {
	data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            edit: false
          }],
          tableDataSelections:[]//选中的表格数据
        }
      },
      created(){
      	this.formatData()
      },
      methods: {
      	//表格数据格式化成我们想要的数据
        /* {
          date: {
            value: '',
            edit: false//编辑状态
          }
        } */
        formatData(){
		this.tableData.forEach(item => {
          	for(let key in item) {
            	item[key] = {
              	value: item[key],
                edit: false
              }
            }
          })
        },
        //表格新增行
        addRow() {
        this.tableData.push({
          date: { value: "", edit: true },
          name: { value: "", edit: true },
          address: { value: "", edit: true }
        });
    	},
    	// 多选
	    selectionChangeHandle(val) {
	      this.equipmentDataSelections = val;
	    },
	    //删除选中数据（单纯实现前端删除）
    batchDelete(selections) {
      if (selections.length > 0) {
        this.$confirm(`确定删除选中数据?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            for (let i = 0; i < selections.length; i++) {
              for (let y = 0; y < this.tableData.length; y++) {
                if (this.tableData[y] == selections[i]) {
                  this.tableData.splice(y, 1);
                  break;
                }
              }
            }
          }).catch(() => {});
      }
    },
    //单元格双击事件
      	celledit(row, column, cell, event){
        	if(row[column.property]){
          	row[column.property].edit = true
            setTimeout(() => {
            	this.$refs[column.property].focus()
            }, 20)
          }
        }
      }
    }