vue + element forms use (in-cell editing, row after new table, delete the table row)

element component generates tables

Front-end components to achieve create tables using the element, the development of the document there is a cell in cell-dblclick-- click event to trigger the event when a cell double-click. By using the event to achieve cell is editable. Table after a new row logic is simple, direct table data add a line on the line. Tombstone table row is also very simple, get checked by comparing the data rows and tables, if they are equal (ie select) from tableData of the record is deleted.

Specific implementation logic is as follows:

<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>

Corresponding implementation method

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)
          }
        }
      }
    }