element 表格组件 实现单独编辑单元格

问题描述：

上一篇文章实现了 表格可编辑功能，但是编辑的话是整行都变成可编辑状态，想要实现单独单元的编辑

通过网上查找，找到大佬封装的代码借鉴一下，侵权请联系

代码：

封装的  EditableCell.vue

<template>
  <div @dblclick="onFieldClick" class="edit-cell">
    <div
      v-if="!editMode && !showInput"
      tabindex="0"
      class="cell-content"
      :class="{ 'edit-enabled-cell': canEdit }"
      @keyup.enter="onFieldClick"
    >
      <slot name="content"></slot>
    </div>
    <component
      :is="editableComponent"
      v-if="editMode || showInput"
      ref="input"
      @focus="onFieldClick"
      @keyup.enter.native="onInputExit"
      v-on="listeners"
      v-bind="$attrs"
      v-model="model"
    >
      <slot name="edit-component-slot"></slot>
    </component>
  </div>
</template>
<script>
export default {
  name: "editable-cell",
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    toolTipContent: {
      type: String,
      default: "Click to edit",
    },
    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() {
    return {
      editMode: false,
    };
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    listeners() {
      return {
        [this.closeEvent]: this.onInputExit,
        ...this.$listeners,
      };
    },
  },
  methods: {
    onFieldClick() {
      if (this.canEdit) {
        this.editMode = true;
        this.$nextTick(() => {
          let inputRef = this.$refs.input;
          if (inputRef && inputRef.focus) {
            inputRef.focus();
          }
        });
      }
    },
    onInputExit() {
      this.editMode = false;
    },
    onInputChange(val) {
      this.$emit("input", val);
    },
  },
};
</script>
<style lang="scss" scope>
.cell-content {
  min-height: 40px;
  padding-left: 5px;
  padding-top: 10px;
  border: 1px solid transparent;
}
.edit-cell {
  .el-input__inner {
    height: 66px;
    line-height: 66px;
    font-size: 22px;
    color: #202020;
  }
}
</style>

　　table 组件调用该组件

<el-table
      :key="key"
      :data="temTableData.tableData"
      :span-method="isMerge ? objectSpanMethod : objectKong"
      border
      style="
        width: 100%;
        background: transparent;
        border-left: 1px solid !important;
        border-top: 1px solid !important;
      "
      :style="$_methods.setStyle(tempTabStyle)"
      class="source table"
      :header-cell-style="$_methods.setStyle(tempHederStyle)"
      :cell-style="$_methods.setStyle(tempTableStyle)"
    >
      <template v-for="(item, index) in temTableData.keyList">
        <el-table-column
          :key="index"
          :prop="item"
          :label="temTableData.headerTable[index]"
        >
          <template #header>
            <editable-cell
              v-if="routerFlag"
              :can-edit="editModeEnabled"
              v-model="temTableData.headerTable[index]"
            >
              <span slot="content">{{ temTableData.headerTable[index] }}</span>
            </editable-cell>
            <span v-else>{{ temTableData.headerTable[index] }}</span>
          </template>
          <editable-cell
            v-if="routerFlag"
            slot-scope="{ row }"
            :can-edit="editModeEnabled"
            v-model="row[temTableData.keyList[index]]"
          >
            <span slot="content">{{ row[temTableData.keyList[index]] }}</span>
          </editable-cell>
          <span v-else>{{ row[temTableData.keyList[index]] }}</span>
        </el-table-column>
      </template>
    </el-table>


import EditableCell from "../../components/EditableCell.vue";
components: {
    EditableCell,
  },

　　效果图：