Vue 3 数据表插件如何添加操作按钮？

Question

我在这个项目中使用 vue3 和 laravel惯性。如何在最后一列添加自定义操作按钮？目前我尝试这样做，但

handleUser()

功能不起作用或触发，我只得到了一个

console.log

。

vue 3 的 jquery 数据表

const { users } = defineProps({
    users: Object
})

const usersData = computed(() => {
    return toRaw(users).map(user => {
        return [
            user.id_number,
            user.name,
            user.email,
            user.course.name,
            user.school_year,
            user.subject_code,
            user.phone_number,
            user.is_active ? `<span class="badge rounded-pill text-bg-primary">Approved</span>` : `<span class="badge rounded-pill text-bg-danger">Pending</span>`,
           `<button class="btn btn-sm btn-primary" @click="handleUser(user)">Approve</button>`
        ];
    });
})

我的数据表组件

                        <DataTable :data="usersData" class="display" ref="table">
                            <thead>
                                <tr>
                                    <th>Id Number</th>
                                    <th>Student Name</th>
                                    <th>Email</th>
                                    <th>Program</th>
                                    <th>School Year</th>
                                    <th>Subject Code</th>
                                    <th>Phone</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </DataTable>

我的表格显示

也许将 user props 转换为 usersData 时出错了？因为它是反应性的，所以我无法将

users

显示到数据表中，所以我将其转换。

Answer 1

<template>
    <DataTable :data="usersData" class="display" ref="table">
        <thead>
            <tr>
                <th>Id Number</th>
                <th>Student Name</th>
                <th>Email</th>
                <th>Program</th>
                <th>School Year</th>
                <th>Subject Code</th>
                <th>Phone</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <template #column-8="props">
            <button type="button" class="btn btn-primary" @click="edit(props.rowData)">Edit</button>
            <button type="button" class="btn btn-danger" @click="delete(props.rowData)">Delete</button>
        </template>
    </DataTable>
</template>

<script>
export default {
    setup() {
        const edit = ((rowData) => {console.log(rowData); });
        const delete = ((rowData) => { console.log(rowData); });
        return { editTransaction, deleteTransaction };
    }
}
</script>