Grid 行按鈕是 Vue 中一個非常常見、實用的 UI 組件。它通常被用于表格中，在每行的最后一列添加一個按鈕來操作當前行數(shù)據(jù)。Vue Grid 行按鈕有多種實現(xiàn)方式，這取決于我們的需求和個人編程習慣。以下將介紹其中兩種實現(xiàn)方式。

第一種實現(xiàn)方式是使用 scoped slots 技術(shù)。我們可以在 Grid 組件中定義一個 scoped slot，然后在按鈕組件中引用這個 slot，即可將按鈕組件動態(tài)渲染到每一行的最后一列。這個方式需要 Grid 組件和按鈕組件之間進行父子組件通信。下面是示例代碼：

<template>
<div>
<Table :columns="columns">
<template slot-scope="{ row }">
<TableRow :row="row">
<template slot="action">
<Button @click="doSomething(row.id)">操作</Button>
</template>
</TableRow>
</template>
</Table>
</div>
</template>

在上面的代碼中，我們給 Grid 組件中的每一行添加了一個 IconButton 組件，其中 IconButton 組件通過 slot 引用了我們在 Grid 組件中定義的一個名為 action 的 slot。由于 TableRow 組件在 Grid 組件中被定義，因此，當 TableRow 組件被渲染時，它會在自己的最后一列位置動態(tài)插入 IconButton 組件。

第二種實現(xiàn)方式是借助 v-slot 指令。這個指令新增于 Vue 2.6 版本，我們可以直接在 DOM 元素上使用 v-slot 指令，而不必顯式地定義一個 slot。下面是示例代碼：

<template>
<div>
<Table :columns="columns">
<template #default="{ row }">
<TableRow :row="row">
<Button v-slot:action @click="doSomething(row.id)">操作</Button>
</TableRow>
</template>
</Table>
</div>
</template>

在上面的代碼中，我們使用了 v-slot 指令，直接將 Button 組件的 slot 與 TableRow 組件的最后一列綁定。當 TableRow 組件被渲染時，v-slot 指令會自動在最后一列位置插入 Button 組件。

不論是使用 scoped slots 技術(shù)還是使用 v-slot 指令，都可以輕松地實現(xiàn) Grid 行按鈕組件。我們只需根據(jù)個人使用習慣和項目需求，選擇一種適合自己的實現(xiàn)方式即可。