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

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

テンプレートに 2 つのボタンを設定し、v-if と v-show を通じて制御します。
データ内のボタンのデフォルト値を設定します。
メソッドは、ボタンをクリックしたときの切り替え効果を制御します。

<テンプレート>
  <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 をよろしくお願いいたします。

以下もご興味があるかもしれません: