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