将按钮添加到VUE数据表

Question

我希望在VUE 2

中为数据表组件中的每一行添加一个按钮

目前数据来自axios请求，如下所示

axios.get('workers/viewall').then(response => this.workerslist = response.data);

在Datatable.vue中添加了一个prop，以使customButtons = True

 customButtons: {
            default: true
        },

并将以下内容添加到我的Vue文件中

customButtons: {
            hide: false,
            icon: 'search',
            onclick: function (user_id) {
                this.$router.push({
                    name: 'edit_worker',
                    params: {user_id: user_id}
                });
            },
        },

这里放入数据组件：

data: function () {
         return {
            workerslist: [],

然后列数据如下：

columndata: [{
                label: 'ID',
                field: 'id',
                numeric: true,
                html: false,
            },{
                label: 'First name',
                field: 'fname',
                numeric: true,
                html: false,
            }, {
                label: 'Surname',
                field: 'sname',
                numeric: false,
                html: false,
            }, {
                label: 'Date of Birth',
                field: 'dob',
                numeric: false,
                html: false,
            }, {
                label: 'Gender',
                field: 'gender',
                numeric: true,
                html: false,
            }, {
                label: 'Trade',
                field: 'trade',
                numeric: false,
                html: false,
            }, {
                label: 'Nationality',
                field: 'nationality',
                numeric: false,
                html: true,
            }, {
                label: 'Telephone',
                field: 'telephone',
                numeric: false,
                html: true,
            }, {
                label: 'Mobile',
                field: 'mobile',
                numeric: false,
                html: true,
            }, {
                label: 'Created',
                field: 'created_at',
                numeric: false,
                html: true,
            },{
                label: 'Edit',
                field: 'edit',
                numeric: false,
                html: true,
                }],

只需按一个按钮即可在每行的末尾点击