テンプレート<el-table :data="データリスト"> <el-table-column label="id" prop="id"></el-table-column> <el-table-column ラベル="名前" プロパティ="名前"> <テンプレート v-slot="props"> <el-入力番号 :min="0" v-model="props.row.count" @change="製品を更新($event)" サイズ="ミニ" </el-input-number> </テンプレート> </el-table-column> </el-table> スクリプトセクションエクスポートデフォルト{ データ() { 戻る { データリスト: [ { id: 1、名前: '001'、カウント: 1 }、 { id: 2、名前: '002'、カウント: 2 }、 { id: 3、名前: '003'、カウント: 3 }、 ] } }, メソッド: { updateProduct(値) { console.info(値) } } } 補足: Vue 学習ノート: イベントにおける $event オブジェクトの役割 Vue では、クリック イベントやその他のイベントをイベントに追加して、タグ要素の DOM を取得したり、タグの属性を変更したりすることができます。具体的な使い方は以下のとおりです。 1. $eventを通じてDOM要素を取得できる html: <button data-get="データボタン" @click="getRvent($event)">イベントオブジェクトを取得</button> まず、$eventオブジェクトを出力して、どのようなプロパティを持っているかを確認しましょう。 srcElement は現在のラベル要素であり、この属性を使用して現在のクリック イベントのラベル要素を取得できます。 たとえば、次のように、ネイティブ js と同じように、取得した要素に対して操作を行うことができます。 // イベントオブジェクトeを取得する getRvent(e){ コンソールログ(e); e.srcElement.style.background="赤"; } クリックする前に: クリック後: 2. さらに、ボタンのテキスト値を変更するなど、タグ自体のプロパティを変更することもできます。 このとき、$event の下の textContent を使用して変更します。 ボタンをクリックする前に: ボタンをクリックした後: 3. 次のように、$event を通じてタグのカスタマイズの属性値を取得することもできます。 HTMLコード: <button data-get="データボタン" @click="getRvent($event)">イベントオブジェクトを取得</button> このボタンタグにはカスタム属性data-getがあり、今回は$eventの属性target.dataset.getに従って取得できます。 次のようにコンソールに印刷できます。 実際、要素自体の属性を使用して操作を実行し、クラスの追加などの操作を中止し、コードの冗長性を減らしてコードを改良できる場合もあります。 上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。 以下もご興味があるかもしれません:
|
<<: Docker で MySQL クラスターを構築する方法の例
Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...
背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...
目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...
1. ダウンロード: http://www.oracle.com/technetwork/java/...
目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...
目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...
まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...
Oracle の大きなテキスト データ型 Clob 長いテキスト型 (MySQL ではサポートされて...
まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...
序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...
目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...
ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...
目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...
この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...
Drop-shadow と box-shadow はどちらも影効果(ハロー効果)のための CSS プ...