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サービス実装プロセス図

推薦する

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

vue3.2 で追加された defineCustomElement の基本原理の詳細な説明

目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...

Vue+Element UIはドロップダウンメニューのカプセル化を実現します

この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...

Dockerで作成したコンテナを削除する方法

Dockerで作成したコンテナを削除する方法1. まず、docker -s -aコマンドを使用してす...

ミニプログラムは左スライドのドロワーメニューをネイティブに実装します

目次WXS レスポンス イベントプランAページ構造とスタイルWXS イベントコールバック関数WXS ...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...

Vue3 + TypeScript 開発の概要

目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...

autoconfを使用してMakefileを生成し、プロジェクトをコンパイルする手順

序文Linux では、コンパイルとリンクには Makefile を使用する必要がありますが、適切な ...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...

JDBC を使用して MySQL を操作するための簡単な分析では、Class.forName("com.mysql.jdbc.Driver") を追加する必要があります。

導入データベースに接続するためにJDBCを使用することに慣れている場合は、データベースに接続するため...

JavaScript でシンプルなクリスマス ゲームを実装する

目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...

Linuxアカウントファイル制御管理の詳細な手順

Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...

マウスをホバーすると画像が折りたたまれる効果を実現する CSS

マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...