一个基于 Vue2.x 的表格组件
基础组件
- [x] Loading 加载组件
- [x] Pagination 分页组件
- [x] Contextmenu 右键菜单组件
- [x] Icon 图标组件
- [x] Locale 国际化组件
Table 组件
- [x] 国际化
- [x] 主题定制 & 内置主题
- [x] 虚拟滚动
- [x] 列固定
- [x] 列隐藏
- [x] 表头固定
- [x] 表头分组
- [x] 筛选
- [x] 排序
- [x] 单元格样式
- [x] 单元格自定义
- [x] 单元格合并
- [x] 单元格选择(键盘操作)
- [x] 单元格编辑
- [x] 右键菜单
- [x] 单元格省略
- [x] 行单选
- [x] 行多选
- [x] 行展开
- [x] 行样式
- [x] footer 汇总
- [x] 自定义事件
npm install nkgj-vue-table
or
yarn add nkgj-vue-table
Write the following in main.js:
import Vue from "vue";
import "nkgj-vue-table/libs/theme-default/index.css";
import VueNkTable from "nkgj-vue-table";
Vue.use(VueNkTable);
new Vue({
el: "#app",
render: (h) => h(App),
});
Example:
<template>
<nk-table :columns="columns" :table-data="tableData" />
</template>
<script>
export default {
data() {
return {
columns: [
{ field: "name", key: "a", title: "Name", align: "center" },
{ field: "date", key: "b", title: "Date", align: "left" },
{ field: "hobby", key: "c", title: "Hobby", align: "right" },
{ field: "address", key: "d", title: "Address" },
],
tableData: [
{
name: "John",
date: "1900-05-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Shanghai",
},
{
name: "Dickerson",
date: "1910-06-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Beijing",
},
{
name: "Larsen",
date: "2000-07-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Chongqing",
},
{
name: "Geneva",
date: "2010-08-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Xiamen",
},
{
name: "Jami",
date: "2020-09-20",
hobby: "coding and coding repeat",
address: "No.1 Century Avenue, Shenzhen",
},
],
};
},
};
</script>
- 现代浏览器和 IE11 及以上
IE / Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |