Laravel+Vue项目中Tabulator操作按钮点击事件失效求助

你遇到的问题核心原因是：内联onclick是在全局window作用域查找函数，而Vue组件中声明的viewFunc等方法属于组件内部作用域，全局作用域无法访问，因此会提示函数未定义。

以下是两种可行的解决方案：

方法一：使用Tabulator的cellClick事件处理（推荐） #

利用Tabulator内置的单元格点击事件，通过判断点击元素的类名区分操作类型，直接调用组件内的方法：

initTabulator() {
    this.columns = [
        { title: "Name", field: "name", width: 150 },
        { title: "Status", field: "status", width: 150 },
        {
            title: "Actions",
            formatter: function(value, data, type, params, component){
                return `
                    <span class="action-btn view-btn border border-slate-300 hover:border-slate-400 bg-red-500">View</span>
                    <button class="action-btn edit-btn border border-slate-300 hover:border-slate-400 bg-blue-500">Edit</button>
                    <button class="action-btn delete-btn border border-slate-300 hover:border-slate-400 bg-green-500">Delete</button>
                `;
            },
            // 绑定单元格点击事件
            cellClick: (e, cell) => {
                const rowData = cell.getData(); // 获取当前行数据
                if (e.target.classList.contains('view-btn')) {
                    this.viewFunc(rowData);
                } else if (e.target.classList.contains('edit-btn')) {
                    this.editFunc(rowData);
                } else if (e.target.classList.contains('delete-btn')) {
                    this.deleteFunc(rowData);
                }
            }
        },
    ];
}

方法二：通过组件实例绑定事件 #

保存Vue组件实例，在formatter中手动创建元素并绑定点击事件：

initTabulator() {
    const vm = this; // 保存当前组件实例
    this.columns = [
        { title: "Name", field: "name", width: 150 },
        { title: "Status", field: "status", width: 150 },
        {
            title: "Actions",
            formatter: (value, data) => {
                const container = document.createElement('div');
                
                // 创建查看按钮并绑定事件
                const viewBtn = document.createElement('span');
                viewBtn.className = 'border border-slate-300 hover:border-slate-400 bg-red-500';
                viewBtn.textContent = 'View';
                viewBtn.addEventListener('click', () => vm.viewFunc(data));
                
                // 创建编辑按钮并绑定事件
                const editBtn = document.createElement('button');
                editBtn.className = 'border border-slate-300 hover:border-slate-400 bg-blue-500';
                editBtn.textContent = 'Edit';
                editBtn.addEventListener('click', () => vm.editFunc(data));
                
                // 创建删除按钮并绑定事件
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'border border-slate-300 hover:border-slate-400 bg-green-500';
                deleteBtn.textContent = 'Delete';
                deleteBtn.addEventListener('click', () => vm.deleteFunc(data));
                
                container.appendChild(viewBtn);
                container.appendChild(editBtn);
                container.appendChild(deleteBtn);
                return container;
            },
        },
    ];
}

内容的提问来源于stack exchange，提问作者Punrong Rany