1、優(yōu)雅的elemend單元格可編輯實(shí)現(xiàn)方法詳解最近在做可編輯特定列的單元格的elementUItable看了多的開源、文章，找到一個(gè)很優(yōu)雅的實(shí)現(xiàn)方式，分享給大家。單元格可編輯的table,用英文搜索：Inlneetabletablet會(huì)得到IW質(zhì)量結(jié)棵。先上效果：EditdisabledEditenabledNameGenderBirthDate一le一Ma2016-05-03:Maryr1r1l1i.iii!Lisa:1|i|i1片P|_希NMT.*_.pFJL.Female:2016-05-02NcnilHI|i|i_._*k.j2016-05-044d_.一_j_._._.一一一一一.EF

2、emale2016-05-01III*1IIetemplatedivstyle=margin-bottom:3el-switchstyle=display:blockv-model=editModeEnabledactive-color=#13ce66inactive-color=#ff4949active-text=Editenabledinactive-text=Editdisableel-table-columnlabel=Nameeditable-cellslot-scope=ro:can-edit=editModeEnablev-model=panslot=conte

3、ntname/el-table-columnel-table-columnminth=1labelGenderel-taemean:type=row.gender=M?primary:dangerslot=contentrow.gender=M?Male:Femalerow.dateimportEditableCellfrom./components/EditableCell.vue;exportdefaultname:App,components:EditableCell,data()returneditModeEnabled:false,gridData:date:2016-05-03,n

4、ame: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-cellmin-height:35px;cursor:pointer;EditeableCell.vue:exportdefaultname:editable-cell,inheritAttrs:false,props:value:type:String,default:,toolTipContent:type:String,default:C

5、licktoedit,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()returneditMode:false;,computed:model:get()re

6、turnthis.value;,set(val)this.$emit(input,val);,listeners()returnthis.closeEvent:this.onInputExit,.this.$listeners;,methods:onFieldClick()if(this.canEdit)this.editMode=true;this.$nextTick()=letinputRef=this.$refs.input;if(inputRef&inputRef.focus)inputRef.focus(););,onInputExit()this.editMode=false;,o

7、nInputChange(val)this.$emit(input,val);.cell-contentmin-height:40px;padding-left:5px;padding-top:5px;border:1pxsolidtransparent;.edit-enabled-cellborder:1pxdashed#409eff;另外一個(gè)單元格編輯的例子：OperationsNameGenderBirthDate7TomVsle2016-05-03Lisa|Female2016-05-02aJonjMale2016-05-04化MaryFemale2016-05-01App.vue:r

8、row.gender=M?Male:Femalerow.dateimportEditableCellfrom./components/EditableCell.vue;exportdefaultname:App,components:EditableCell,data()returngridData: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;,met

9、hods:setEditMode(row,index)row.editMode=true;,saveRow(row,index)row.editMode=false;,mounted()this.gridData=this.gridData.map(row=return.row,editMode:false;);.edit-cellmin-height:35px;cursor:pointer;EditeableCell.vueexportdefaultname:editable-cell,inheritAttrs:false,props:value:type:String,default:,t

10、oolTipContent:type:String,default:Clicktoedit,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()returneditMode:false;,computed:model:get()returnthis.value;,set(val)this.$emit(input,val);,listeners()returnthis.closeEvent:this.onInputExit,.this.$listeners;,methods:onFieldClick()this.e