vue2+vxe-table（一）

最新推荐文章于 2024-03-20 09:36:30 发布

鱼空

最新推荐文章于 2024-03-20 09:36:30 发布

阅读量852

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_69502730/article/details/130361213

版权

官方文档：vxe-table v3

cnpm install --save vxe-utils

cnpm install babel-plugin-import -D

在src/pligins/utils.js

import'vxe-utils'

在src/pligins/xtable.js

import Vue from 'vue'
import XEUtils from 'xe-utils'
import {
  // 全局对象
  VXETable,

  // 功能模块
  // Filter,
  // Menu,
  // Edit,
  // Export,
  // Keyboard,
  // Validator,

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

  // 表格
  Table
} from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'

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

// 表格功能
// Vue.use(Filter)
// .use(Edit)
// .use(Menu)
// .use(Export)
// .use(Keyboard)
// .use(Validator)

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

// 安装表格
.use(Table)

// 给 vue 实例挂载内部对象，例如：
// Vue.prototype.$XModal = VXETable.modal
// Vue.prototype.$XPrint = VXETable.print
// Vue.prototype.$XSaveFile = VXETable.saveFile
// Vue.prototype.$XReadFile = VXETable.readFile

在babel.config.js

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

在main.js

import './plugins/utils'
import './plugins/xtable'

举例

<template>
    <div>
        <vxe-table :data="tableData">
            <vxe-table-column type="seq" title="序号" width="80"></vxe-table-column>
            <vxe-table-column field="name" title="名字"></vxe-table-column>
            <vxe-table-column field="sex" title="性别"></vxe-table-column>
            <vxe-table-column field="address" title="地址"></vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
                { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
            ],
        }
    },
}
</script>

<style scoped></style>