未使用静态数据在Vue应用程序中加载jsGrid

npm install jsgrid

<template>
  <div id="jsGrid"></div>
</template>

<script>
import 'jsgrid/dist/jsgrid.min.css';
import 'jsgrid/dist/jsgrid-theme.min.css';
import jsGrid from 'jsgrid';

export default {
  name: 'JsGridComponent',
  mounted() {
    this.loadJsGrid();
  },
  methods: {
    loadJsGrid() {
      $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        inserting: true,
        editing: true,
        sorting: true,
        paging: true,

        data: [], // 初始为空，将从API动态加载

        fields: [
          { name: "Name", type: "text", width: 150 },
          { name: "Age", type: "number", width: 50 },
          { name: "Address", type: "text", width: 200 },
          { type: "control" }
        ],

        controller: {
          loadData: this.fetchData
        }
      });
    },

    async fetchData() {
      try {
        const response = await fetch('https://your-api-url.com/data');
        return await response.json();
      } catch (error) {
        console.error('Error fetching data:', error);
        return [];
      }
    }
  }
};
</script>