php 行内编辑,element-ui table 行内编辑

EditRow.ts

interface NoParamConstructor {

new(): T;

}

export default class EditRow {

origin: T = null

copy: T = null

is_edit: boolean = false

ctor: NoParamConstructor;

constructor(ctor: NoParamConstructor, 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

save

cancel

{{ scope.row.origin.name }}

import EditRow from './EditRow.ts'

class entity {

constructor() {

this.name = '123'

}

}

const rows = [

new EditRow(entity, new entity())

]

export default {

data() {

return {

rows

}

}

}