vue-easytable组件

中文官网Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkboxvue table 组件 强大、灵活，支持 单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、全选、行展开、条件过滤、footer 汇总、导出excel、汇总 Vue2.x flexible table components, support for cell edit,multi-head fixed, multi-column fixed, clumn drag, sort, custom column,Cell Editing, Support cell merge (colSpan and rowSpan),Support checkbox selectionhttps://happy-coding-clans.github.io/vue-easytable/#/zh/doc/intro

 1.安装

npm install vue-easytable

2.完整引入

在 main.js 中写入以下内容：

import Vue from "vue";
// 引入样式
import "vue-easytable/libs/theme-default/index.css";
// 引入组件库
import VueEasytable from "vue-easytable";

Vue.use(VueEasytable);

new Vue({
    el: "#app",
    render: (h) => h(App),
});

按需引入

import Vue from "vue";
// 引入样式
import "vue-easytable/libs/theme-default/index.css";
// 引入组件库
import { VeTable, VePagination, VeIcon, VeLoading, VeLocale } from "vue-easytable";

Vue.use(VeTable);
Vue.use(VePagination);
Vue.use(VeIcon);
Vue.use(VeLoading);

Vue.prototype.$veLoading = VeLoading;
Vue.prototype.$veLocale = VeLocale;

new Vue({
    el: "#app",
    render: (h) => h(App),
});

CDN 方式使用

示例