标签:tps OWIN attr ldd def http bin OLE 定义
自定义组件(EditableCell.vue):
1 <template> 2 <div @dblclick="onFielddblClick" class="edit-cell"> 3 <el-tooltip 4 v-if="!editMode && !showInput" 5 :placement="toolTipPlacement" 6 :open-delay="toolTipDelay" 7 :content="toolTipContent" 8 > 9 <div 10 tabindex="0" 11 class="cell-content" 12 :class="{‘edit-enabled-cell‘: canEdit}" 13 @keyup.enter="onFielddblClick" 14 > 15 <slot name="content"></slot> 16 </div> 17 </el-tooltip> 18 <component 19 :is="editableComponent" 20 v-if="editMode || showInput" 21 ref="input" 22 @focus="onFielddblClick" 23 @keyup.enter.native="$event.target.blur" 24 @blur="onInputExit" 25 v-on="listeners" 26 v-bind="$attrs" 27 v-model="model" 28 > 29 <slot name="edit-component-slot"></slot> 30 </component> 31 </div> 32 </template> 33 <script> 34 export default { 35 name: "editable-cell", 36 inheritAttrs: false, 37 props: { 38 value: { 39 type: String, 40 default: "" 41 }, 42 toolTipContent: { 43 type: String, 44 default: "双击编辑" 45 }, 46 toolTipDelay: { 47 type: Number, 48 default: 500 49 }, 50 toolTipPlacement: { 51 type: String, 52 default: "top-start" 53 }, 54 showInput: { 55 type: Boolean, 56 default: false 57 }, 58 editableComponent: { 59 type: String, 60 default: "el-input" 61 }, 62 closeEvent: { 63 type: String, 64 default: "change" 65 }, 66 canEdit: { 67 type: Boolean, 68 default: false 69 } 70 }, 71 data() { 72 return { 73 editMode: false, 74 tempVal: "" 75 }; 76 }, 77 computed: { 78 model: { 79 get() { 80 return this.value; 81 }, 82 set(val) { 83 this.$emit("input", val); 84 this.tempVal = val; 85 } 86 }, 87 listeners() { 88 return { 89 [this.closeEvent]: this.onInputExit, 90 ...this.$listeners 91 }; 92 } 93 }, 94 methods: { 95 onFielddblClick() { 96 if (this.canEdit) { 97 this.editMode = true; 98 this.$nextTick(() => { 99 let inputRef = this.$refs.input; 100 if (inputRef && inputRef.focus) { 101 inputRef.focus(); 102 } 103 }); 104 } 105 }, 106 onInputExit() { 107 this.editMode = false; 108 if(this.tempVal!="") 109 this.$emit("inputComplate",this.tempVal); 110 } 111 } 112 }; 113 </script>
父组件中使用:
1 <el-table-column label="昵称" width="200"> 2 <editable-cell 3 slot-scope="{row}" 4 :can-edit="editModeEnabled" 5 @inputComplate="inputComplate" 6 v-model="row.PetName" 7 > 8 <span slot="content">{{row.PetName}}</span> 9 </editable-cell> 10 </el-table-column>
参考:https://github.com/heianxing/editable-table-component-vue-element
ElementUI自定义组件——让table中的cell(单元格)可编辑
标签:tps OWIN attr ldd def http bin OLE 定义
原文地址:https://www.cnblogs.com/imPedro/p/12811809.html