Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

実装方法は3つのステップに分かれています。

  1. テンプレートに 2 つのボタンを設定し、v-if と v-show を通じて制御します。
  2. データ内のボタンのデフォルト値を設定します。
  3. メソッドは、ボタンをクリックしたときの切り替え効果を制御します。
<テンプレート>
  <el-テーブル
    :data="テーブルデータ"
    国境
    スタイル="幅: 100%">
    <el-テーブル列
      修理済み
      プロパティ="日付"
      label="日付"
      幅="200">
    </el-table-column>
     <el-テーブル列
      prop="状態"
      label="ステータス"
      幅="150">
    </el-table-column>
    <el-テーブル列
      プロパティ="名前"
      label="名前"
      幅="120">
      <テンプレート スロット スコープ="スコープ">
            <el-input placeholder="コンテンツを入力してください" v-show="scope.row.show" v-model="scope.row.name">
            </el-input>
            <span v-show="!scope.row.show">{{scope.row.name}}
            </span>
        </テンプレート>
    </el-table-column>
    <el-テーブル列
      prop="州"
      label="州"
      幅="120">
    </el-table-column>
    <el-テーブル列
      プロパティ="city"
      label="市街地"
      幅="120">
    </el-table-column>
    <el-テーブル列
      prop="アドレス"
      label="住所"
      幅="300"
       :show-overflow-tooltip="true" >
    </el-table-column>
    <el-テーブル列
      プロパティ="zip"
      label="郵便番号"
      幅="120">
    </el-table-column>
    <el-テーブル列
      固定="右"
      ラベル="操作"
      幅="300">
      <テンプレート スロット スコープ="スコープ">
        <el-button @click="handleClick(scope.row)" type="text" size="small">表示</el-button>
        <el-button @click="scope.row.show =true" type="text" size="small">編集</el-button>
        <el-button @click="scope.row.show =false" type="text" size="small">保存</el-button>
        <el-button @click="changeStatus" type="text" size="small" v-if="btnStatus == 0">有効にする</el-button>
        <el-button @click="changeStatus" type="text" size="small" v-show="btnStatus == 1">無効にする</el-button>

      </テンプレート>

    </el-table-column>
  </el-table>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    メソッド: {
      ハンドルクリック(行) {
        コンソールログ(行);
      },
      ステータスの変更(){
                this.btnStatus = this.btnStatus === 0 ? 1 : 0;
            }
    },

    データ() {
      戻る {
          btnステータス: 0,
        テーブルデータ: [{
          日付: '2016-05-02'、

          名前: '王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖 王小湖'、
          省: '上海'、
          都市: 普陀区、
          住所: '上海市普陀区金沙江路1518号 上海市普陀区金沙江路1518号',
          郵便番号: 200333,
          表示:true
        }, {
          日付: '2016-05-04'、

          名前: 王小湖、
          省: '上海'、
          都市: 普陀区、
          住所: '上海市普陀区金沙江路1517号'、
          郵便番号: 200333,
          表示:true
        }]
      }
    }
}
</スクリプト>

また、図 1 に示すように、ボタンのデフォルト値はデータの下に配置する必要があることに注意してください。

テーブル内に配置することはできません。そうしないと、ボタンが表示されず、エラーが報告されます。図 2: プロパティまたはメソッド「btnStatus」はインスタンス上で定義されていませんが、レンダリング中に参照されます。

このエラーの原因は、「btnStatus」がテンプレートまたはメソッドで使用されているが、データで定義されていないことです。

これで、vue のクリックトグルボタン機能を有効にした後にボタンが無効になる問題についての説明は終わりです。より関連性の高い vue クリックトグルボタンのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue $attrs と inheritAttr を使用してボタンを無効にした効果を実現する
  • Vueはページコンテンツの選択を禁止する機能を実装しており、入力ボックスとテキストフィールドのみがオプションです。
  • vue の v-html 要素のラベル スタイルを解決する 3 つの方法の詳細な説明
  • Vue でボタン タグのスタイルと機能を無効にする方法

<<:  MySQLのバックアップとリカバリの詳細な説明

>>:  アイデア展開Tomcatサービス実装プロセス図

推薦する

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...

Windows で MySQL インストーラーを使用して MySQL サービスをインストールするチュートリアル図

MYSQL は、MYSQL サービスやその他のコンポーネントをインストールするためのインストーラ方式...

JSインターセプト文字列の3つの方法の詳細な説明

JS には、文字列をインターセプトするための 3 つのメソッド、 slice() 、 substri...

Centos7.5でのIPアドレス設定の実装

1. IPアドレスを設定する前に、まずifconfigを使用してネットワークカード情報を表示し、ネッ...

MySQL の frm ファイルからテーブル構造を復元する 3 つの方法 [推奨]

mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...

MySQL 5.7 のインストールと設定の詳細な手順

1. MySQLをダウンロードする1. MySQLの公式ウェブサイトにログインし、64ビットシステム...

ユーザーエクスペリエンスの76の経験ポイントの要約

ウェブサイト体験の分類1. 感覚体験:快適性を重視した視聴覚体験をユーザーに提供します。 2. イン...

CSS を使用して同じ親タグの左側と右側に 2 つのボタンを配置する方法

この記事では、主に同じ親タグの左側と右側にある 2 つのボタンの CSS レイアウト方法を紹介し、皆...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。

layui テーブルには複数行のデータがあります。外部入力コンテンツを通じて、指定された行を見つけ...

Expressプロジェクトファイルディレクトリの説明と詳細な機能の説明

app.js: スタートアップファイル、またはエントリファイルpackage.json: プロジェク...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...

Ubuntu 18.04.4 に MySQL をインストールするプロセスの詳細な説明

Ubuntu 18.04.4 に MySQL をインストールするプロセスを見てみましょう。内容は次の...

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...

CSS3の新しい背景プロパティの詳細な説明

これまで、CSS の背景の属性には、color、image、repeat、attachment、po...