JSPM

vue-fantable

0.1.0

ESM via JSPM
ES Module Entrypoint
Export Map
Keywords
License
Repository URL
TypeScript Types
README

Created 2 years ago
Published 2 years ago
Downloads 21
Score
MPQF
License MIT

Vue table component

Package Exports

vue-fantable

Readme

还在加紧适配中

still work on adept vue3

vue-fantable

English | 中文

如果我看的更远，那是因为我站在巨人的肩膀上。

介绍

本项目由 vue-easytable 更新而来，使用 rollup 替代 webpack 和 gulp，支持 Vue3

特点

采用虚拟滚动技术，支持 30 万行数据展示和实时编辑
永久开源免费。当然你也可以选择捐赠，保证项目长期维护和功能加速开发

API & 文档

安装

确保 Vue 版本至少为 3.2

npm install vue-fantable

yarn add vue-fantable

使用

讲一下内容添加到 main.js:

import {createApp} from "vue";
import "vue-easytable/libs/theme-default/index.css";
import App from './app.vue'
import VueEasytable from "vue-easytable";
const app = createApp(App)
app.use(VueEasytable);

app.mounted('#app')

示例:

<template>
  <ve-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>

功能支持

其它基础组件

Table 组件

开发计划

保证项目可以打包构建
- 更新项目依赖
- 并且转移到 ESM，且 Vue2 调用时不会出错
- 可以打包 CSS、less 内容
- 移除其它包依赖，只依赖 vue
- 保证项目示例（文档）可以运行
- 更新示例为 vite，且使用 vue3，与此同时，更新 fan-table，保证 Vue3 可以使用
- 添加页面或者能运行该组件的内容
- 使用 google font 替代 iconfont，避免版权风险
- 多个实例之间数据可能没有进行隔离
- 模块拆分，打包优化
- 更新文档中使用 Vue 的方式，Vue3 没有默认导出，不能使用 import Vue from 'vue'
- 尝试 unplugin-vue 替代 rollup-plugin-vue
重写 Loading 组件
异步加载模式，拆分为三步进行加载
性能优化，加上防抖和节流
之后加上 TS
- 添加测试用例
最后支持原生（无框架依赖）