优雅的elementUI table单元格可编辑实现方法详解
2019-04-11 09:17
2341 查看
最近在做可编辑特定列的单元格的elementUI table，看了N多的开源、文章，找到一个很优雅的实现方式，分享给大家。
PS:单元格可编辑的table，用英文搜索：Inline editable table with ElementUI 会得到高质量结果。
先上效果：
APP.vue：
<template>
<div id="app">
<div style="margin-bottom: 30px">
<el-switch
style="display: block"
v-model="editModeEnabled"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="Edit enabled"
inactive-text="Edit disabled">
</el-switch>
</div>
<el-table
:data="gridData"
style="width: 100%">
<el-table-column
label="Name"
min-width="180">
<editable-cell slot-scope="{row}"
:can-edit="editModeEnabled"
v-model="row.name">
<span slot="content">{{row.name}}</span>
</editable-cell>
</el-table-column>
<el-table-column
min-wwidth="150"
label="Gender">
<editable-cell
slot-scope="{row}"
editable-component="el-select"
:can-edit="editModeEnabled"
close-event="change"
v-model="row.gender">
<el-tag size="medium"
:type="row.gender === 'M' ? 'primary' : 'danger'"
slot="content">
{{row.gender === 'M' ? 'Male': 'Female'}}
</el-tag>
<template slot="edit-component-slot">
<el-option value="M" label="Male"></el-option>
<el-option value="F" label="Female"></el-option>
</template>
</editable-cell>
</el-table-column>
<el-table-column
label="Birth Date"
min-width="250">
<editable-cell
slot-scope="{row}"
:can-edit="editModeEnabled"
editable-component="el-date-picker"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
v-model="row.date">
<span slot="content">{{row.date}}</span>
</editable-cell>
</el-table-column>
</el-table>
</div>
</template>
<script>
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"
}
]
};
}
};
</script>
<style>
.edit-cell {
min-height: 35px;
cursor: pointer;
}
</style>
EditeableCell.vue:
<template>
<div @click="onFieldClick" class="edit-cell">
<el-tooltip v-if="!editMode && !showInput"
:placement="toolTipPlacement"
:open-delay="toolTipDelay"
:content="toolTipContent">
<div tabindex="0"
class="cell-content"
:class="{'edit-enabled-cell': canEdit}"
@keyup.enter="onFieldClick">
<slot name="content"></slot>
</div>
</el-tooltip>
<component :is="editableComponent"
v-if="editMode || showInput"
ref="input"
@focus="onFieldClick"
@keyup.enter.native="onInputExit"
v-on="listeners"
v-bind="$attrs"
v-model="model">
<slot name="edit-component-slot"></slot>
</component>
</div>
</template>
<script>
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);
}
}
};
</script>
<style>
.cell-content {
min-height: 40px;
padding-left: 5px;
padding-top: 5px;
border: 1px solid transparent;
}
.edit-enabled-cell {
border: 1px dashed #409eff;
}
</style>
github:https://github.com/heianxing/editable-table-idea-vue-element
另外一个单元格编辑的例子：
App.vue：
<template>
<div id="app">
<el-tooltip content="Click on any of the cells or on the edit button to edit content">
<i class="el-icon-info"></i>
</el-tooltip>
<el-table
:data="gridData"
style="width: 100%">
<el-table-column
label="Operations"
min-width="180">
<template slot-scope="{row, index}">
<el-button icon="el-icon-edit"
@click="setEditMode(row, index)">
</el-button>
<el-button type="success" icon="el-icon-check"
@click="saveRow(row, index)">
</el-button>
</template>
</el-table-column>
<el-table-column
label="Name"
min-width="180">
<editable-cell :show-input="row.editMode" slot-scope="{row}" v-model="row.name">
<span slot="content">{{row.name}}</span>
</editable-cell>
</el-table-column>
<el-table-column
min-wwidth="150"
label="Gender">
<editable-cell
:show-input="row.editMode"
slot-scope="{row}"
editable-component="el-select"
close-event="change"
v-model="row.gender">
<el-tag size="medium"
:type="row.gender === 'M' ? 'primary' : 'danger'"
slot="content">
{{row.gender === 'M' ? 'Male': 'Female'}}
</el-tag>
<template slot="edit-component-slot">
<el-option value="M" label="Male"></el-option>
<el-option value="F" label="Female"></el-option>
</template>
</editable-cell>
</el-table-column>
<el-table-column
label="Birth Date"
min-width="250">
<editable-cell
: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">
<span slot="content">{{row.date}}</span>
</editable-cell>
</el-table-column>
</el-table>
</div>
</template>
<script>
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
};
});
}
};
</script>
<style>
.edit-cell {
min-height: 35px;
cursor: pointer;
}
</style>
EditeableCell.vue：
<template>
<div @click="onFieldClick" class="edit-cell">
<el-tooltip v-if="!editMode && !showInput"
:placement="toolTipPlacement"
:open-delay="toolTipDelay"
:content="toolTipContent">
<div tabindex="0" @keyup.enter="onFieldClick">
<slot name="content"></slot>
</div>
</el-tooltip>
<component :is="editableComponent"
v-if="editMode || showInput"
ref="input"
@focus="onFieldClick"
@keyup.enter.native="onInputExit"
v-on="listeners"
v-bind="$attrs"
v-model="model">
<slot name="edit-component-slot"></slot>
</component>
</div>
</template>
<script>
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);
}
}
};
</script>
<style>
</style>
github:https://github.com/heianxing/editable-table-component-vue-element
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 详解VUE 对element-ui中的ElTableColumn扩展
- element-ui 中的table的列隐藏问题解决
- vue2.0 + element UI 中 el-table 数据导出Excel的方法
- VUE element-ui 写个复用Table组件的示例代码
- 用jquery.sortElements实现table排序
- vue element-ui table表格滚动加载方法
- Element-ui table中过滤条件变更表格内容的方法
- 基于Vue+element-ui 的Table二次封装的实现
- vue element table 表格请求后台排序的方法
- elementUI中Table表格问题的解决方法
- element ui table 增加筛选的方法示例
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现PointF和SizeF的属性在PropertyGrid中可编辑的方法
- 用javascript实现div可编辑的常见方法
- 将.sql文件导入powerdesigner的实现方法详解
- 请教方法和例子：VS2003的datagrid控件，如何实现用鼠标拖动的方法选中任意区域的多个单元格，然后进行统一编辑？？
- 在.Net框架中 C# 实现多线程的同步方法详解
- 详解asp.net在ISAPI_rewrite 中实现伪静态的方法
- Reactor反应器的实现方法详解
- 不用ajax实现点击文字即可编辑的方法
- 详解Oracle用户解锁命令的两则实现方法
- C# 实现多线程的同步方法详解
- 详解网络数字电视的实现方法与关键技术
- 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
- 用PHP实现浏览器点击下载TXT文档的方法详解
- 编写php应用程序实现摘要式身份验证的方法详解
- 不用ajax实现点击文字即可编辑的方法
- VS 母版页详解实现具体方法
- SQL Server 2008实现"编辑所有行"和"返回所有行"的方法
- URLRewrite 实现方法详解
- 详解301永久重定向实现方法
- 织梦（DeDeCMS v5.7 ）添加自定义属性的实现方法(图文详解)