关于vxe-table全局引入的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于vxe-table全局引入的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

主要讲解一下vxe-table全局引入然后使用碰到的问题
0：vxe-table的官网地址
1：基本环境
（1）：vue版本为3.x以上（我的是3.2.13）
（2）：依赖库：xe-utils
注意：这篇博客的是vue3的脚手架搭建的，如果需要看低版本，请点击这里
2：使用npm安装

npm install xe-utils vxe-table@next      // 官网最标准的
yarn add xe-utils vxe-table              //   yarn (不推荐)

3：package.json文件里面就会有以下内容

"dependencies": {
    "vue": "^3.2.13",
    "vxe-table": "^4.2.8",
    "xe-utils": "^3.5.4"
  },

4：走过上面的那部分，将官网的以下代码复制给main.js文件中

import { App, createApp } = 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

function useTable (app: App) {
  app.use(VXETable)
  // 给 vue 实例挂载内部对象，例如：
  // app.config.globalProperties.$XModal = VXETable.modal
  // app.config.globalProperties.$XPrint = VXETable.print
  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
  // app.config.globalProperties.$XReadFile = VXETable.readFile
}
 createApp(App).use(useTable).mount('#app')

5：本来以为就可以了，但是不出意外的话就出意外了，简单改造后的代码为

import { createApp } from 'vue'  
import App from './App.vue'
//***********main.js中添加修改的代码*************
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable);
//**********************end**********************
const app = createApp(App)
app.use(ant);
app.mount('#app');
```bash

6：在第五步的基础上，保存运行项目的话报如下错误
Uncaught TypeError: Cannot read properties of undefined (reading ‘use’)
at eval (main.js?fbea:11:1)

7：main.js最终版本

import { createApp } from 'vue'
import ant from 'ant-design-vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
const app = createApp(App)
app.use(ant);
app.use(VXETable); // 因为Vue是一个undefind，将Vue改成了app.use就可以了
// 注意：这个use要在挂载app的前面，不然vxe-table的数据会一直报undefined
app.mount('#app');

8：简单的demo代码（随便新建一个vue页面的代码）

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="role" title="Role"></vxe-column>
      <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script >
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const tableData = ref([
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
    ])
    return {
      tableData
    }
  }
})
</script>

9：最终效果
could not install from

原因：在Vue3 中，通过使用 createApp 函数来创建应用，使用vue库的createApp方法才会生成vm，vm才能调用use，而不是直接使用Vue。老实说，这个官网全局导入写的过于简单了，就有点懵逼，踩坑记录一下。
10：参考文章（排序不分先后）
（1）:vxe-table官网：https://vxetable.cn/#/table/start/install
（2）：vxe-table 使用示例及其安装指南：https://gitee.com/xuliangzhan_admin/vxe-table-demo#%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97
（3）：githup安装示例：https://github.com/x-extends/vxe-table文章来源地址https://www.toymoban.com/news/detail-674138.html

到了这里，关于关于vxe-table全局引入的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！