ElementUI自定义组件——让table中的cell(单元格)可编辑

Posted 2021-02-21 impedro

 

 

自定义组件(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