表格操作列交互相互影响怎么办

原文链接：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>