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

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

最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセルを編集する必要が生じました。以下はテーブルを編集可能にする私独自の方法です。ご興味があれば、ぜひ学んでみてください。

成果を達成する

ここに画像の説明を挿入

編集後、対応するテーブルデータフィールドの値も変更されます。コンソールは変更を表示するためにすべてのデータを出力します。

実装コード

1. カスタム編集コンポーネント

<テンプレート>
  <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>

これで、element-ui でセルを直接クリックしてテーブルを編集する方法についての説明は終了です。要素セル編集に関するその他のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 要素 UI テーブル埋め込みプログレスバー機能の実装方法
  • Vue の element-ui フォームまたはテーブル ラベルでの改行の問題について
  • element-uiコンポーネントel-autocompleteの使用の詳細な説明
  • VUE+element-ui ファイルアップロードサンプルコード
  • element-ui に基づく動的スキニングのコードの詳細な説明

<<:  HTML でスタイルを使用して属性を追加する例

>>:  CSS 3.0 テキストホバージャンプ特殊効果コード

推薦する

Docker rocketmq デプロイメントの実装例

目次準備展開プロセスRocketMQ の初体験関連する質問ヘルプドキュメント私は最近 RocketM...

Bootstrap が人気な 11 の理由

序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...

WeChatアプレットのスクロールビューが左右連動効果を実現

WeChatアプレットはスクロールビューを使用して左右のリンクを実現します。参考までに、具体的な内容...

mysql8.0 でユーザーを作成して権限を付与する際のエラーの解決方法の詳細な説明

質問1:エラーを報告する書き込み方法: GRANT OPTION を使用して、'123123...

CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...

CSSアニメーションを途中で止めて姿勢を維持する方法

序文かつて、難しい問題に遭遇しました。タワークレーンからスイングハウスを落下させる必要がありましたが...

一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...

優れたユーザー インターフェース デザインのための 37 のヒント (画像付き)

1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...

Docker に共通コンポーネント (mysql、redis) をインストールする方法

Dockerはmysqlをインストールします docker search mysql 検索 dock...

モバイル Web アプリ上の画像が鮮明ではなく、非常にぼやけているのはなぜですか?

なぜ?最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

HTML コメント HTML 内のテキストコメントをマークするための記号

HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析

入力ボックスへのユーザー入力、ウィンドウのサイズ変更、スクロール、Intersection Obse...