handsontabe自定义右键菜单调用Vue函数以及在Vue中生成handsontable

最新推荐文章于 2024-08-10 07:56:04 发布

Dream-worker

最新推荐文章于 2024-08-10 07:56:04 发布

阅读量1.7k

点赞数

分类专栏：前端开发文章标签： handsontable Vue

本文链接：https://blog.csdn.net/jinmenzhizi/article/details/88657179

版权

本文介绍了如何在Vue应用中使用handsontable，特别是在前端HTML编辑器中创建自定义右键菜单并调用Vue组件内的函数。通过在`mounted()`生命周期钩子中初始化handsontable，设置`contextMenu`选项来实现右键菜单，并展示如何传递数据（如字典格式的`table_spool_data`和List格式的`table_spool_column_list`）以生成handsontable表格。

摘要由CSDN通过智能技术生成

用handsontable实现调用Vue函数

- handsontabe自定义右键菜单调用Vue函数
- 在Vue中生成handsontable

handsontabe自定义右键菜单调用Vue函数

**
在前端HTML编辑器中，添加一个div：

<div id="PurchaseList" ></div>

这个块用于生成handsontable数据表。

首先，创建一个Vue函数，并定义Vue函数之前，先创建一个钩子函数：mounted()，如下：

var PurchaseData = {
        PurchaseNo:  '',
    };
    var vm = new Vue({
        el: '#myprofiles',
        data:PurchaseData,
        mounted() {
        // 钩子函数，在执行methods里面定义的方法, 需要赋值给window
        window.toSearchPurchase = this.toSearchPurchase;
        },
        methods:{
        toSearchPurchase(PurchaseNostr){
                data_to_send = {
                    PurchaseNo: PurchaseNostr,
                };
                // console.log(data_to_send);
                if(data_to_send.PurchaseNo === ""){
                    alert(&#