README.md

    vxe-table 使用示例

    安装指南

    v1 vue 2.6 依赖: npm install vxe-table@1 xe-utils@2
    v2 vue 2.6 依赖: npm install vxe-table@2 xe-utils@3
    v3 vue 2.6 依赖: npm install vxe-table@3 xe-utils@3
    v4 vue next 依赖: npm install vxe-table@next xe-utils@3

    v2 ~ v3 全局导入

    src/plugins/vxe-table

    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/style.css'
    
    Vue.use(VXETable)

    src/main

    import Vue from 'vue'
    import App from './App.vue'
    
    import './plugins/vxe-table'
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')

    v2 ~ v3 babel 按需导入

    安装 babel 插件,配置插件

    npm install babel-plugin-import -D

    修改 .babelrc 或 babel.config.js 配置文件

    module.exports = {
      plugins: [
        [
          'import',
          {
            'libraryName': 'vxe-table',
            'style': true
          }
        ]
      ]
    }

    src/plugins/vxe-table

    import Vue from 'vue'
    import XEUtils from 'xe-utils'
    import {
      VXETable,
      Icon,
      Header,
      Column,
      Table
    } from 'vxe-table'
    import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'
    
    // 导入默认的国际化(如果项目中使用多语言,则应该导入到 vue-i18n 中)
    VXETable.setup({
      i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCNLocat, key), args)
    })
    
    Vue.use(Icon)
    Vue.use(Header)
    Vue.use(Column)
    Vue.use(Table)

    src/main

    import Vue from 'vue'
    import App from './App.vue'
    
    import './plugins/vxe-table'
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')

    v4 全局导入

    src/plugins/vxe-table

    import { App } from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/style.css'
    
    // 全局默认参数
    VXETable.setup({
      version: 0,
      zIndex: 100,
      table: {
        autoResize: true
      }
    })
    
    export function useTable (app: App) {
      app.use(VXETable)
    }
    

    src/main

    import { createApp } from 'vue'
    import App from './App.vue'
    
    import { useTable } from './plugins/vxe-table'
    
    createApp(App).use(useTable).mount('#app')

    v4 babel 按需导入

    安装 babel 插件,配置插件

    npm install babel-plugin-import -D

    修改 .babelrc 或 babel.config.js 配置文件

    module.exports = {
      plugins: [
        [
          'import',
          {
            'libraryName': 'vxe-table',
            'style': true
          }
        ]
      ]
    }

    src/plugins/vxe-table

    import { App } from 'vue'
    import XEUtils from 'xe-utils'
    import {
      VXETable,
      Header,
      Icon,
      Column,
      Table
    } from 'vxe-table'
    import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'
    
    // 全局默认参数
    VXETable.setup({
      version: 0,
      zIndex: 100,
      table: {
        autoResize: true
      }
    })
    
    // 导入默认的国际化(如果项目中使用多语言,则应该导入到 vue-i18n 中)
    VXETable.setup({
      i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCNLocat, key), args)
    })
    
    export function useTable (app: App) {
      app.use(Header)
        .use(Icon)
        .use(Column)
        .use(Table)
    }
    

    src/main

    import { createApp } from 'vue'
    import App from './App.vue'
    
    import { useTable } from './plugins/vxe-table'
    
    createApp(App).use(useTable).mount('#app')

    v4 vite 按需导入

    安装 vite 插件,配置插件

    npm vite-plugin-style-import -D

    修改 vite.config.ts 配置文件

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import styleImport from 'vite-plugin-style-import'
    
    export default defineConfig({
      plugins: [
        vue(),
        styleImport({
          libs: [
            {
              libraryName: 'vxe-table',
              esModule: true,
              resolveComponent: (name) => `vxe-table/es/${name}`,
              resolveStyle: (name) => `vxe-table/es/${name}/style.css`
            }
          ]
        })
      ]
    })

    src/plugins/vxe-table

    import { App } from 'vue'
    import XEUtils from 'xe-utils'
    import {
      VXETable,
      Header,
      Icon,
      Column,
      Table
    } from 'vxe-table'
    import zhCNLocat from 'vxe-table/es/locale/lang/zh-CN'
    
    // 全局默认参数
    VXETable.setup({
      version: 0,
      zIndex: 100,
      table: {
        autoResize: true
      }
    })
    
    // 导入默认的国际化(如果项目中使用多语言,则应该导入到 vue-i18n 中)
    VXETable.setup({
      i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCNLocat, key), args)
    })
    
    export function useTable (app: App) {
      app.use(Header)
        .use(Icon)
        .use(Column)
        .use(Table)
    }
    

    src/main

    import { createApp } from 'vue'
    import App from './App.vue'
    
    import { useTable } from './plugins/vxe-table'
    
    createApp(App).use(useTable).mount('#app')

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/xuliangzhan/vxe-table-demo

    发行版本

    当前项目没有发行版本

    贡献者 2

    X xuliangzhan @xuliangzhan
    D dependabot[bot] @dependabot[bot]

    开发语言

    • Vue 56.1 %
    • JavaScript 19.3 %
    • TypeScript 14.1 %
    • HTML 8.3 %
    • SCSS 2.3 %