vue + formas de elementos de uso (en modificar las celdas, filas y nueva tabla, elimine la fila de la tabla)

componente de elemento genera tablas

componentes de front-end para lograr crear tablas utilizando el elemento, el desarrollo del documento hay una celda de evento de clic de células dblclick-- para lanzar el evento cuando una célula doble clic. Al utilizar el caso para lograr celda es editable. Mesa después de una nueva lógica fila es, datos de la tabla directos simple agregar una línea en la línea. fila de tabla de desecho es también muy simple, conseguir el ingreso mediante la comparación de las filas y las tablas de datos, si son iguales (es decir, seleccionar) a partir de TableData se borra el registro.

la lógica de aplicación específica es la siguiente:

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

método de aplicación correspondiente

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