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>