Element-ui klickt direkt auf die Zelle in der Tabelle, um sie zu bearbeiten

<Vorlage>
  <div Klasse="editCell">
    <div Klasse="kannBearbeiten" v-if="KannBearbeiten" @click="beginEdit">
      <label v-show="!editStatus">
        <span v-if="this.value!== null && this.value !== undefiniert && this.value !== ''">{{ Wert }}{{this.suffix}}</span>
        <span v-else style="padding-left: 100%;padding-top: 100%;"/>
      </Bezeichnung>
      <label v-show="BearbeitenStatus">
        <Eingabe
          Typ="Text"
          Klasse="Eingabeklasse"
          ref="Eingabe"
          v-on:keyup.13="Fokus verlieren"
          :Wert="Wert"
          @blur="Fokus verlieren"
        />
      </Bezeichnung>
    </div>

    <label class="kann nicht bearbeitet werden" v-else>
      <span>{{ Wert }}{{ Suffix }}</span>
    </Bezeichnung>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "EditCell",
  Requisiten: {
    /**
     *Bindender Wert */
    Wert: {
      erforderlich: true
    },
    /**
     * Bearbeitbar? */
    Kann bearbeitet werden:
      Typ: Boolean,
      Standard: true
    },
    /**
     * Formatfunktion */
    formatData: {
      Typ: Funktion,
      Standard: Wert => {
        Rückgabewert;
      }
    },
    /**
     * Ereignis bearbeiten */
    nachBearbeiten: {
      Typ: Funktion,
      Standard: () => {}
    },
    /**
     * Ob zunächst formatiert werden soll */
    initFormat: {
      Typ: Boolean,
      Standard: false
    },
    Suffix: {
      Standard: ""
    }
  },
  Daten() {
    zurückkehren {
      editStatus: false,
      showData: "",
      Standarddaten: "",
      Zeitüberschreitung: null
    };
  },
  Methoden: {
    /**
     * Klicken Sie hier, um mit der Bearbeitung zu beginnen */
    beginEdit() {
      dies.editStatus = wahr;
      setzeTimeout(() => {
        dies.$refs.input.focus();
      }, 1);
    },

    /**
     * @param {event} Ereignis
     * Schließen Sie den Bearbeitungsstatus, wenn der Fokus verloren geht, und speichern Sie die Daten */
    loseFocus(Ereignis) {
      let Wert = this.formatData(Ereignis.Ziel.Wert);
      dies.editData(Wert);
      this.closeEditStatus(Wert);
      dies.afterEdit(Wert);
    },

    /**
     * Eingabeereignis veröffentlichen, um Daten zu ändern * @param-Wert
     */
    editData(Wert) {
      dies.$emit("Eingabe", Wert);
    },

    /**
     * Bearbeitungsstatus schließen * @param-Wert
     */
    closeEditStatus(Wert) {
      dies.editStatus = falsch;
    },
    /**
     * Anfängliche Formatierungsdaten */
    initData() {
      lassen Sie neuenWert = this.formatData(this.value);
      dies.$emit("Eingabe", neuerWert);
    }
  },
  montiert() {
    wenn (dieses.initFormat) {
      dies.initData();
    }
  },
  betrachten:
    'Wert': Funktion(neuerWert){
      dies.$emit("Eingabe", dies.formatData(neuerWert));
    }
  }
};
</Skript>

<Stilbereich>
.editCell {
  Höhe: 100%;
  Breite: 100 %;
}
.Eingabeklasse {
  Höhe: 30px;
  Breite: 100 %;
  Hintergrundfarbe: #fff;
  Rahmenradius: 4px;
  Rand: 1px durchgezogen #dcdfe6;
  Farbe: #606266;
  Anzeige: Inline-Block;
  Schriftgröße: erben;
  Zeilenhöhe: 30px;
  Umriss: 0;
  Polsterung: 0 15px;
  Übergang: Rahmenfarbe 0,2 s Kubik-Bézier (0,645, 0,045, 0,355, 1);
  Überlauf: sichtbar;
  Touch-Aktion: Manipulation;
  Rand: 0;
}
</Stil>

importiere EditCell aus "@/components/EditCell/EditCell";
Komponenten: { EditCell},

 <el-table-column
    v-for="Element in Tabellenspalte"
      :prop="Artikel.dataIndex"
      :label="Artikeltitel"
      :Breite="Artikelbreite"
      :ausrichten="Element.ausrichten"
      :Schlüssel="Artikel-ID"
      :fest="Artikel.fest"
  >
  	  // Rufen Sie hier die benutzerdefinierte Komponente auf (dataIndex ist das Feld in den Header-Daten, das der Anzeige des Lehrernamens entspricht, der dem Header-Lehrer entspricht).
      <template slot-scope="Umfang">
          <span v-if="item.dataIndex !== 'batchInvest' && item.dataIndex !== 'remark'">{{scope.row[item.dataIndex]}}</span>
          // Wenn Sie die Daten formatieren müssen, können Sie Folgendes festlegen: format-data="formatFun" formatFun Diese Methode kann in den Methoden der aktuellen Seite definiert werden <edit-cell v-else v-model="scope.row[item.dataIndex]" :can-edit="true"/>
      </Vorlage>
      <el-table-column
          v-für="Element2 in Element.Kinder"
          :prop="item2.dataIndex"
          :label="Artikel2.Titel"
          :Breite="Element2.Breite"
          :ausrichten="Element2.ausrichten"
          :Schlüssel="item2.id"
          :fest="Artikel2.fest"
      >
      </el-Tabellenspalte>
  </el-Tabellenspalte>