Vue组件中调用外部jsGrid函数创建表格报错，求解决方法

我来帮你搞定这个问题！你遇到的错误大概率是依赖加载顺序不对或者Vue组件无法访问全局的jQuery/jsGrid导致的，下面一步步给你解决：

1. 先确保依赖正确引入 #

jsGrid是基于jQuery的，所以必须先加载jQuery，再加载jsGrid的JS和CSS文件，顺序绝对不能乱：

方式一：CDN引入（在项目的index.html中添加） #

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入jsGrid的JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<!-- 最后引入jsGrid的样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

方式二：npm安装引入 #

先安装依赖：

npm install jquery jsgrid --save

然后在项目的main.js中全局注册（或者在组件内单独导入）：

import $ from 'jquery'
import 'jsgrid'
import 'jsgrid/dist/jsgrid.min.css'
import 'jsgrid/dist/jsgrid-theme.min.css'

// 挂载到window，让Vue组件能访问到
window.$ = $
window.jQuery = $

2. 修改Vue组件代码，确保正确调用 #

在组件的mounted钩子中操作DOM是正确的，但推荐用Vue的ref来获取DOM元素（比原生ID选择器更符合Vue的规范），同时确保通过window.$或者已导入的$来调用jsGrid：

<template>
  <!-- 用ref标记DOM元素 -->
  <div ref="jsGridContainer"></div>
</template>

<script>
// 如果没在main.js全局导入，也可以在这里单独导入
// import $ from 'jquery'
// import 'jsgrid'

export default {
  mounted() {
    // 获取DOM元素并初始化jsGrid
    const $grid = window.$(this.$refs.jsGridContainer)
    $grid.jsGrid({
      width: "100%",
      height: "500px",
      // 加上必要的配置，比如列和数据（示例）
      columns: [
        { name: "Name", type: "text", width: 150 },
        { name: "Age", type: "number", width: 60 },
        { name: "Email", type: "text", width: 200 },
        { type: "control" }
      ],
      data: [
        { Name: "Alice", Age: 28, Email: "alice@example.com" },
        { Name: "Bob", Age: 32, Email: "bob@example.com" }
      ]
    })
  }
}
</script>

<style scoped>
/* 如果是npm导入的样式，这里不需要额外加；如果是CDN引入也不用 */
</style>

3. 排查常见错误 #

• 如果控制台提示$ is not defined：说明jQuery没有被正确全局挂载，检查引入顺序或者是否在main.js中把$挂载到window了。
• 如果提示$(...).jsGrid is not a function：说明jsGrid没有正确加载，或者加载顺序在jQuery之前，调整顺序即可。

内容的提问来源于stack exchange，提问作者MohammadJavad Abbasi