テーブル操作の列が相互作用し、相互に影響を与える場合の対処方法

元のリンク: https://www.jylt.cc/#/detail?id=52e99c543992ef83419a3cdfbb77fad9
仕事で次のような要件に遭遇しました。

表の各行の最後の列には、いくつかのアクション ボタンがあります。たとえば、「削除」ボタンをクリックすると、現在のボタンが削除のスタイルに設定されますが、他の行のボタンは変更されません。ボタンを列に直接記述すると、ボタンをクリックすると、他の行のボタンもインタラクティブに変更され、明らかにニーズを満たしません。コードは以下のように表示されます。

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state !== 3"
            size="mini"
            type="danger"
            @click="del(scope.row)"><i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
</el-table-column>

この問題を解決するにはどうすればよいでしょうか? 実際、これは非常に簡単です。ボタンを個別に抽出してコンポーネント化し、必要に応じてそれを参照するだけで、各行のボタンが互いに影響を与えなくなります。コードは次のとおりです。

<template slot-scope="scope">
    <opt-button :scope="scope"></opt-button>
</template>

その中にはopt-button抽出された成分も含まれます。

<template>
  <div>
    <el-button v-if="scope.row.state !== 3"
               size="mini"
               type="danger"
               :loading="delLoading"
               @click="del(scope.row)"><i class="el-icon-delete"></i> 删除
    </el-button>
  </div>
</template>