1

我正在使用插槽来显示 Vue Tables 2 中的按钮。如何将仓库的 id 即 123 或 456 传递给 edit() 事件处理程序？

我尝试添加道具（因为这是文档显示的内容）。但我没有任何运气。我在一个组件中使用 Vue Tables 2。

<template>
<div>
    <h1>How to pass warehouse id to edit() method?</h1>
    <v-client-table :columns="columns" :data="warehouses" :options="options">
        <span slot="actions" slot-scope="{ WarehousesMin }"> 
            <button v-on:click="edit">Edit</button>
        </span>
    </v-client-table>
</div>


export default { 
name: 'WarehousesMin',
 data() {
        return {
            warehouses: [
                {"id": 123, "name": "El Dorado", "loc": "EDO"},
                {"id": 456, "name": "Tartarus", "loc": "TAR"}
            ],
            options: {
                headings: {name: 'Name', code: 'Loc', actions: 'Actions'}
            },
            columns: ['name', 'loc', 'actions'],
        }
    },
methods: {
    edit (warehouseId) {
        // How to get id of warehouse here?  i.e. 123 or 456
    }   
   }
}
4

1 回答 1

5

我以前没有使用过这个库，但据我所知 Vue 插槽，你可以把你的代码改成这个，然后再试一次：

<template>
<div>
    <h1>How to pass warehouse id to edit() method?</h1>
    <v-client-table :columns="columns" :data="warehouses" :options="options">
        <span slot="actions" slot-scope="{row}"> 
            <button v-on:click="edit(row.id)">Edit</button>
        </span>
    </v-client-table>
</div>

在脚本部分，更改为：

export default { 
name: 'WarehousesMin',
 data() {
        return {
            warehouses: [
                {"id": 123, "name": "El Dorado", "loc": "EDO"},
                {"id": 456, "name": "Tartarus", "loc": "TAR"}
            ],
            options: {
                headings: {name: 'Name', code: 'Loc', actions: 'Actions'}
            },
            columns: ['id', 'name', 'loc', 'actions'],
        }
    },
methods: {
    edit (warehouseId) {
        // The id can be fetched from the slot-scope row object when id is in columns
    }   
   }
}

我认为这应该有效，但如果没有，请告诉我。

于 2018-09-05T05:55:37.940 回答