Element-uiはテーブル内のセルを直接クリックして編集します

<テンプレート>
  <div class="editCell">
    <div class="canEdit" v-if="CanEdit" @click="beginEdit">
      <label v-show="!editStatus">
        <span v-if="this.value!== null && this.value !== undefined && this.value !== ''">{{ value }}{{this.suffix}}</span>
        <span v-else style="padding-left: 100%;padding-top: 100%;"/>
      </ラベル>
      <label v-show="編集ステータス">
        <入力
          タイプ="テキスト"
          クラス="inputClass"
          ref="入力"
          v-on:keyup.13="フォーカスを失う"
          :value="値"
          @blur="フォーカスを失う"
        />
      </ラベル>
    </div>

    <label class="cannotEdit" v-else>
      <span>{{ 値 }}{{ 接尾辞 }}</span>
    </ラベル>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "EditCell"、
  小道具: {
    /**
     * バインディング値 */
    価値： {
      必須: true
    },
    /**
     * 編集可能? */
    編集可能:
      タイプ: ブール値、
      デフォルト: true
    },
    /**
     * フォーマット関数 */
    フォーマットデータ: {
      タイプ: 関数、
      デフォルト: 値 => {
        戻り値;
      }
    },
    /**
     * イベント編集 */
    編集後: {
      タイプ: 関数、
      デフォルト: () => {}
    },
    /**
     * 最初にフォーマットするかどうか */
    初期化フォーマット: {
      タイプ: ブール値、
      デフォルト: false
    },
    接尾辞: {
      デフォルト： ""
    }
  },
  データ（） {
    戻る {
      編集ステータス: false、
      表示データ: "",
      デフォルトデータ: "",
      タイムアウト: null
    };
  },
  メソッド: {
    /**
     * クリックして編集を開始 */
    編集を始める() {
      this.editStatus = true;
      タイムアウトを設定する(() => {
        this.$refs.input.focus();
      }, 1);
    },

    /**
     * @param {event} イベント
     * フォーカスが失われたときに編集状態を閉じてデータを保存します*/
    loseFocus(イベント) {
      値を this.formatData(event.target.value) とします。
      this.editData(値);
      this.closeEditStatus(値);
      this.afterEdit(値);
    },

    /**
     * データを変更する入力イベントを発行する * @param value
     */
    編集データ(値) {
      this.$emit("入力", 値);
    },

    /**
     * 編集状態を閉じる * @param 値
     */
    closeEditStatus(値) {
      this.editStatus = false;
    },
    /**
     * 初期フォーマットデータ */
    初期化データ() {
      newValue を this.formatData(this.value) とします。
      this.$emit("input", newValue);
    }
  },
  マウント() {
    if (this.initFormat) {
      このメソッドは、次のコードで実行されます。
    }
  },
  時計：
    '値': 関数(newVal){
      this.$emit("input", this.formatData(newVal));
    }
  }
};
</スクリプト>

<スタイルスコープ>
.editCell {
  高さ: 100%;
  幅: 100%;
}
.inputClass{
  高さ: 30px;
  幅: 100%;
  背景色: #fff;
  境界線の半径: 4px;
  境界線: 1px 実線 #dcdfe6;
  色: #606266;
  表示: インラインブロック;
  フォントサイズ: 継承;
  行の高さ: 30px;
  アウトライン: 0;
  パディング: 0 15px;
  遷移: 境界線の色 0.2s 立方ベジェ(0.645, 0.045, 0.355, 1);
  オーバーフロー: 表示可能;
  タッチアクション：操作;
  マージン: 0;
}
</スタイル>

EditCellを「@/components/EditCell/EditCell」からインポートします。
コンポーネント: { EditCell},

 <el-テーブル列
    v-for="テーブル列内の項目"
      :prop="item.dataIndex"
      :label="アイテムタイトル"
      :width="アイテムの幅"
      :align="アイテム.align"
      :key="アイテムID"
      :fixed="アイテム.fixed"
  >
  	  //ここでカスタム コンポーネントを呼び出します (dataIndex はヘッダー データ内のフィールドであり、ヘッダーの教師に対応する教師名を表示するのと同じです)
      <テンプレート スロット スコープ="スコープ">
          <span v-if="item.dataIndex !== 'batchInvest' && item.dataIndex !== 'remark'">{{scope.row[item.dataIndex]}}</span>
          // データをフォーマットする必要がある場合は、次のように設定できます: format-data="formatFun" formatFun このメソッドは、現在のページのメソッドで定義できます <edit-cell v-else v-model="scope.row[item.dataIndex]" :can-edit="true"/>
      </テンプレート>
      <el-テーブル列
          v-for="item.children 内の item2"
          :prop="item2.データインデックス"
          :label="item2.title"
          :width="item2.width"
          :align="item2.align"
          :key="item2.id"
          :fixed="item2.fixed"
      >
      </el-table-column>
  </el-table-column>