elementui可编辑单元格_优雅的elementUI table 单元格可编辑实现方法

最近在做可编辑特定列的单元格的elementUI table，看了N多的开源、文章，找到一个很优雅的实现方式，分享给大家。

PS:单元格可编辑的table，用英文搜索：Inline editable table with ElementUI 会得到高质量结果。

先上效果：

APP.vue：

style="display: block"

v-model="editModeEnabled"

active-color="#13ce66"

inactive-color="#ff4949"

active-text="Edit enabled"

inactive-text="Edit disabled">

:data="gridData"

style="width: 100%">

label="Name"

min-width="180">

:can-edit="editModeEnabled"

v-model="row.name">

{ {row.name}}

min-wwidth="150"

label="Gender">

slot-scope="{row}"

editable-component="el-select"

:can-edit="editModeEnabled"

close-event="change"

v-model="row.gender">

:type="row.gender === 'M' ? 'primary' : 'danger'"

slot="content">

{ {row.gender === 'M' ? 'Male': 'Female'}}

label="Birth Date"

min-width="250">

slot-scope="{row}"

:can-edit="editModeEnabled"

editable-component="el-date-picker"

format="yyyy-MM-dd"

value-format="yyyy-MM-dd"

v-model="row.date">

{ {row.date}}

import EditableCell from "./components/EditableCell.vue";

export default {

name: "App",

components: {

EditableCell

},

data() {

return {