element-ui table 行内编辑

EditRow.ts

vue+element-ui+slot-scope原生实现可编辑表格

interface NoParamConstructor<T> {
  new(): T;
}

export default class EditRow<T> {
  origin: T = null
  copy: T = null
  is_edit: boolean = false
  ctor: NoParamConstructor<T>;

  constructor(ctor: NoParamConstructor<T>, origin: T) {
    this.ctor = ctor
    this.origin = origin
    this.show_edit = this.show_edit.bind(this)
    this.save = this.save.bind(this)
  }
  show_edit() {
    this.copy = Object.assign(new this.ctor(), this.origin)
    this.is_edit = true
  }
  save() {
    this.origin = this.copy
    this.is_edit = false
  }
}

---

vue file

<template>
  <el-row>
    <el-table :data="rows" size="mini">
      <el-table-column label="name">
        <template slot-scope="scope">
          <template v-if="scope.row.is_edit">
            <input v-model="scope.row.copy.name" />
            <el-button size="mini" @click="scope.row.save">save</el-button>
            <el-button size="mini" @click="scope.row.is_edit = false">cancel</el-button>
          </template>
          <template v-else>
            <span @click="scope.row.show_edit">{{ scope.row.origin.name }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>

<script>
  import EditRow from './EditRow.ts'

  class entity {
    constructor() {
      this.name = '123'
    }
  }

  const rows = [
    new EditRow(entity, new entity())
  ]

  export default {
    data() {
      return {
        rows
      }
    }
  }
</script>

原文地址：https://segmentfault.com/a/1190000012471593