# vxetableTree

**Repository Path**: jsopy/vxetable-tree

## Basic Information

- **Project Name**: vxetableTree
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-26
- **Last Updated**: 2022-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 快速开始

本文档是基于 Vue3.0 + VxeTable 书写而成,如果后续有修改的。请自行参考文档

# 安装

安装有两种

- 全局安装

- 按需安装

## 按需安装

### 步骤

- 1. 安装 babel-plugin-import 插件

```javascript
cnpm install babel-plugin-import -D
```

- 修改文件 .babelrc 或 babel.config.js

```javascript

 {
    "plugins": [
      [
          "import",
          {
            "libraryName": "vxe-table",
            "style": true // 样式是否也按需加载
          }
      ]
          ]
  }

```

- 2. main.js

```javascript
import { Header, VXETable, Table, Column, Button } from 'vxe-table';
import XEUtils from 'xe-utils';
import zhCN from 'vxe-table/lib/locale/lang/zh-CN';

// 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
});

function useTable(app) {
  // 表格功能
  app
    .use(Header)
    // .use(Footer)
    // .use(Icon)
    // .use(Filter)
    // .use(Edit)
    // .use(Menu)
    // .use(Export)
    // .use(Keyboard)
    // .use(Validator)

    // 可选组件
    .use(Column)
    // .use(Colgroup)
    // .use(Grid)
    // .use(Tooltip)
    // .use(Toolbar)
    // .use(Pager)
    // .use(Form)
    // .use(FormItem)
    // .use(FormGather)
    // .use(Checkbox)
    // .use(CheckboxGroup)
    // .use(Radio)
    // .use(RadioGroup)
    // .use(RadioButton)
    // .use(Switch)
    // .use(Input)
    // .use(Select)
    // .use(Optgroup)
    // .use(Option)
    // .use(Textarea)
    .use(Button)
    // .use(Modal)
    // .use(List)
    // .use(Pulldown)

    // 安装表格
    .use(Table);

  // 给 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');
```

## 全局安装

### 步骤

- 安装包

```javascript
cnpm install xe-utils@3 vxe-table@next
```

- main.js

```javascript

 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')

```