本文介绍了一种优雅地实现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 {
editModeEnabled: false,
gridData: [
{
date: "2016-05-03",
name: "Tom",
gender: "M"
},
{
date: "2016-05-02",
name: "Lisa",
gender: "F"
},
{
date: "2016-05-04",
name: "Jon",
gender: "M"
},
{
date: "2016-05-01",
name: "Mary",
gender: "F"
}
]
};
}
};
.edit-cell {
min-height: 35px;
cursor: pointer;
}
EditeableCell.vue:
:placement="toolTipPlacement"
:open-delay="toolTipDelay"
:content="toolTipContent">
class="cell-content"
:class="{'edit-enabled-cell': canEdit}"
@keyup.enter="onFieldClick">
v-if="editMode || showInput"
ref="input"
@focus="onFieldClick"
@keyup.enter.native="onInputExit"
v-on="listeners"
v-bind="$attrs"
v-model="model">
export default {
name: "editable-cell",
inheritAttrs: false,
props: {
value: {
type: String,
default: ""
},
toolTipContent: {
type: String,
default: "Click to edit"
},
toolTipDelay: {
type: Number,
default: 500
},
toolTipPlacement: {
type: String,
default: "top-start"
},
showInput: {
type: Boolean,
default: false
},
editableComponent: {
type: String,
default: "el-input"
},
closeEvent: {
type: String,
default: "blur"
},
canEdit: {
type: Boolean,
default: false
}
},
data() {
return {
editMode: false
};
},
computed: {
model: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
}
},
listeners() {
return {
[this.closeEvent]: this.onInputExit,
...this.$listeners
};
}
},
methods: {
onFieldClick() {
if (this.canEdit) {
this.editMode = true;
this.$nextTick(() => {
let inputRef = this.$refs.input;
if (inputRef && inputRef.focus) {
inputRef.focus();
}
});
}
},
onInputExit() {
this.editMode = false;
},
onInputChange(val) {
this.$emit("input", val);
}
}
};
.cell-content {
min-height: 40px;
padding-left: 5px;
padding-top: 5px;
border: 1px solid transparent;
}
.edit-enabled-cell {
border: 1px dashed #409eff;
}
另外一个单元格编辑的例子：
App.vue：
:data="gridData"
style="width: 100%">
label="Operations"
min-width="180">
@click="setEditMode(row, index)">
@click="saveRow(row, index)">
label="Name"
min-width="180">
{{row.name}}
min-wwidth="150"
label="Gender">
:show-input="row.editMode"
slot-scope="{row}"
editable-component="el-select"
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">
:show-input="row.editMode"
slot-scope="{row}"
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 {
gridData: [
{
date: "2016-05-03",
name: "Tom",
gender: "M"
},
{
date: "2016-05-02",
name: "Lisa",
gender: "F"
},
{
date: "2016-05-04",
name: "Jon",
gender: "M"
},
{
date: "2016-05-01",
name: "Mary",
gender: "F"
}
]
};
},
methods: {
setEditMode(row, index) {
row.editMode = true;
},
saveRow(row, index) {
row.editMode = false;
}
},
mounted() {
this.gridData = this.gridData.map(row => {
return {
...row,
editMode: false
};
});
}
};
.edit-cell {
min-height: 35px;
cursor: pointer;
}
EditeableCell.vue：
:placement="toolTipPlacement"
:open-delay="toolTipDelay"
:content="toolTipContent">
v-if="editMode || showInput"
ref="input"
@focus="onFieldClick"
@keyup.enter.native="onInputExit"
v-on="listeners"
v-bind="$attrs"
v-model="model">
export default {
name: "editable-cell",
inheritAttrs: false,
props: {
value: {
type: String,
default: ""
},
toolTipContent: {
type: String,
default: "Click to edit"
},
toolTipDelay: {
type: Number,
default: 500
},
toolTipPlacement: {
type: String,
default: "top-start"
},
showInput: {
type: Boolean,
default: false
},
editableComponent: {
type: String,
default: "el-input"
},
closeEvent: {
type: String,
default: "blur"
}
},
data() {
return {
editMode: false
};
},
computed: {
model: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
}
},
listeners() {
return {
[this.closeEvent]: this.onInputExit,
...this.$listeners
};
}
},
methods: {
onFieldClick() {
this.editMode = true;
this.$nextTick(() => {
let inputRef = this.$refs.input;
if (inputRef) {
inputRef.focus();
}
});
},
onInputExit() {
this.editMode = false;
},
onInputChange(val) {
this.$emit("input", val);
}
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
