优雅的优雅的elementUI table单元格可编辑实现方法详解单元格可编辑实现方法详解
主要介绍了优雅的elementUI table单元格可编辑实现方法详解,小编觉得挺不错的,现在分享给大家,也给大
家做个参考。一起跟随小编过来看看吧
最近在做可编辑特定列的单元格的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>
评论0