pivottable组件的get展示

package.json

@@ -8,13 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "c3": "^0.7.17",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
     "jquery": "^3.5.1",
     "jquery-ui": "^1.12.1",
     "pivottable": "^2.23.0",
     "vue": "^2.6.11",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "webpack-jquery-ui": "^2.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.0",

src/api/payment.js

@@ -0,0 +1,9 @@
+import request from '@/utils/axios'
+
+export function getPayment(params) {
+    return request({
+        url: '/payment/payment/',
+        method: 'get',
+        params
+    })
+}

src/views/payment/payment.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="output"></div>
+</template>
+
+<script>
+import $ from "jquery";
+import "pivottable";
+import "pivottable/dist/pivot.min.css";
+import "webpack-jquery-ui";
+import "pivottable/dist/c3_renderers";
+import { getPayment } from "@/api/payment";
+
+export default {
+  name: "Payment",
+  data() {
+    return {
+      list: [],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getPayment().then((res) => {
+        this.list = res.data;
+        this.setPivot();
+      });
+    },
+    setPivot() {
+      this.$nextTick(() => {
+        $("#output").pivotUI(this.list);
+      });
+    },
+  },
+};
+</script>