最近在做可编辑特定列的单元格的elementUI表，看了普通多的开源、文章，找到一个很优雅的实现方式，分享给大家PS:单元格可编辑的桌子，用英文搜索：带有ElementUI的内联可编辑表会得到高质量结果。

先上效果：

APP.vue:

模板div id=' app ' div style=' margin-bottom : 30px ' El-switch style=' display : block ' v-mode=' editModeEnabled ' active-color=' # 13 ce66 ' inactive-color=' # ff 4949 ' active-text=' Edit enabled ' inactive-text=' Edit disabled '/El-switch/div El-table 333: data=' grid ATA ' style=' width : 100% ' El-table-column标签主要' : '危险''槽='内容{row.gender==='M '？男' : '女}} /el-tag模板槽='编辑-组件-插槽' El-选项值='M '标签='男/el选项el选项值='F '标签='女/El-option/模板/可编辑-单元格/El-表格-列埃尔-表格-列标签='出生日期'最小-宽度='250 '可编辑-单元格槽-范围=' { row } ' :可以编辑=' editModeEnabled '可编辑-component=' El-date '/components/editable cell。vue '；导出默认{ name: 'App '，components: { EditableCell }，data(){ return { editmodeenabled : false，grindata :[{ date : ' 2016-05-03 '，name: ' Tom '，gender: 'M' }，{ date: '2016-05-02 '，name: 'Lisa '，gender: 'F' }，{ date}}/脚本风格。编辑-单元格{最小高度： 35px光标：指针；}/styleEditeableCell.vue:

模板div @ click=' onFieldClick ' class=' edit-cell ' El-tooltip v-if='！编辑模式！showInput ' : placement=' tooltiplacement ' : open-delay=' toolTipDelay ' : content=' toolTipContent ' div tabindex=' 0 ' class=' cell-content ' : class=' { ' edit-enabled-cell ' : canEdit } ' @向上键。enter=' onFieldClick ' slot name=' content '/slot/div/El-tooltip component : is=' editableComponent ' v-if=' close event : { type : String，default: 'blur' }，canEdit: { type: Boolean，default: false } }，data(){ return { edit mode : false }；}，计算出： { model : { get(){ return this。价值；},设置(瓦尔){这个.$emit('input '，val)；} }，listeners(){ return {[this。这是。oninputexit，这个$ listeners }；} }，方法： { onFieldClick(){ if(this。{这个。编辑模式=真；这个$nextTick(()={ let inputRef=this .$ refs.inputif(InputRef InputRef。焦点){ InputRef。焦点()；} });} }，onInputExit(){ this。editmode=false}，onInputChange(val) { this .$emit('input '，val)；} }};/脚本风格。细胞含量{最小高度： 40px左衬垫左： 5px衬垫-top : 5px；border: 1px固体透明；}.启用编辑的单元格{ border: 1px虚线# 409 eff }/style github :3359 github。com/heian xing/可编辑-表格-想法-vue-元素

另外一个单元格编辑的例子：

App.vue:

模板div id='app' el-tooltip content='单击任意单元格或单击编辑按钮编辑内容I class=' El-icon-info '/I/El-tooltip El-table : data=' gridData ' style=' width : 100% ' El-table-column label=' Operations ' min-width=' 180 '模板slot-scope='{row，index } ' El-button图标=' El-icon-edit ' @ Click=' setEditMode(row，index主要' : '危险''槽='内容{row.gender==='M '？男' : '女}} /el-tag模板槽='编辑-组件-插槽' El-选项值='M '标签='男/el选项el选项值='F '标签='女/El-option/模板/可编辑-单元格/El-表格-列埃尔-表格-列标签='出生日期'最小-宽度='250 '可编辑-单元格： how-input=' row。' editmode '槽-作用域=“{ row }”可编辑-component=' El-date '/components/editable cell。vue '；导出默认{ name: 'App '，components: { EditableCell }，data(){ return { grindata :[{ date : ' 2016-05-03 '，name: 'Tom '，gender: 'M' }，{ date: '2016-05-02 '，name: 'Lisa '，gender: 'F' }，{ date 3: ' 2016 }行，索引){ row.editMode=true}，saveRow(行，索引){ row.editMode=false} }，mounted(){ this。GridAta=这个。GridAta。映射(行={ return }.行，edit mode : false }；});}};/脚本风格。编辑-单元格{最小高度： 35px光标：指针；}/styleEditeableCell.vue:

模板div @ click=' onFieldClick ' class=' edit-cell ' El-tooltip v-if='！编辑模式！showInput ' : placement=' tooltiplacement ' : open-delay=' toolTipDelay ' : content=' toolTipContent ' div tabindex=' 0 ' @ key up。输入=' onFieldClick '槽名=' content '/slot/div/El-tooltip component : is=' editableComponent ' v-if=' edit mode | | showInput ' ref=' input ' @ focus=' onFieldClick ' @ key up。进入。native=' oninpute }，computed : { model : { get(){ return this。价值；},设置(瓦尔){这个.$emit('input '，val)；} }，listeners(){ return {[this。这是。oninputexit，这个$ listeners }；} }，方法： { onFieldClick(){ this。编辑模式=真；这个$nextTick(()={ let inputRef=this .$ refs . input if(InputRef){ InputRef。焦点()；} });}，onInputExit(){ this。editmode=false}，onInputChange(val) { this .$emit('input '，val)；} }};/脚本风格/风格github :https://github。com/heian xing/可编辑-表格-组件-vue-元素

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。