テンプレート<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 クラスターを構築する方法の例
この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...
今日 Docker コンテナを作成したとき、誤ってイメージの名前を間違って入力しました。その結果、コ...
目次序文Vue Nativeの機能宣言的レンダリング双方向バインディングVue.js エコシステムの...
この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...
多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...
プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...
1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...
この記事では、Windows で MySQL をインストールする方法について簡単に説明します。他にご...
前提条件: Dockerはすでにインストールされています1. 画像を見つける(方法は2つあります) ...
例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...
MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...
# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...
mysql コマンドを使用して MySQL サーバーに接続します。 MySQL サーバーが起動したら...
<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...
目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...