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

推薦する

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

Vueのフィルターとディレクティブの詳細な説明

目次vueカスタムディレクティブグローバル指令ローカル指示使用フック関数(両方ともオプション)使用方...

JavaScript で 2 次元配列を作成するためのヒント

Js での 2 次元配列の作成:まず、JavaScript は 1 次元配列のみをサポートしています...

JavaScript Proxyオブジェクトの詳細な説明

目次1. プロキシとは何ですか? 2. 使い方は? 1. プロキシを使用する簡単な例2. 対象オブジ...

オブジェクトのプロパティを反復処理する際の TypeScript の問題

目次1. 問題2. 解決策1. オブジェクトをanyとして宣言する2. オブジェクトのインターフェー...

Linuxルートの初期値を設定する方法の簡単な分析

Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...

Linux QT Kit が見つからない、バージョンが空の問題の解決策

現在このような問題が発生しています 私の状況は、QT が動かなくなってしまったため、仮想マシンを再起...

Tomcatc3p0 で jnid データ ソースを構成する 2 つの実装方法の分析

c3p0の使用c3p0jarパッケージをインポートする <!-- https://mvnrep...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...

WeChatアプレットがスネークゲームを実装

この記事では、参考までに、スネークゲームを実装するためのWeChatアプレットの具体的なコードを紹介...

MySQL の FIND_IN_SET() と IN の違いを簡単に分析します

以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...

パフォーマンスの最適化を教える 52 個の SQL 文

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

VirtualBox に CentOS、JDK、Hadoop をインストールする詳細なチュートリアル

目次1. 前提条件1.1 サポートされているプラ​​ットフォーム1.2 jdk および hadoop...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...