Vue的强大虚拟数据网格组件– vue-datagrid

Vue的强大虚拟数据网格组件– vue-datagrid
插件名称 vue-datagrid
版本号 v3.0.9
发布时间 2021年2月5日
插件作者 revolist

RevoGrid是Vue.js应用程序的功能强大,反应迅速,性能良好,类似于电子表格的数据网格组件。

安装和下载:

# NPM
$ npm i @revolist/vue-datagrid

主要特点:

  • 虚拟滚动。
  • 数据排序。
  • 数据过滤。
  • 进出口。
  • 主题化的。
  • 列/单元格操作。
  • 拖放。
  • 从Excel,Google表格或其他任何表格复制/粘贴

基本用法:

1.导入并注册组件。

import VGrid from "@revolist/vue-datagrid";
export default {
  // ...
  components: {
    VGrid,
  },
  // ...
};

2.将网格组件添加到模板。

<template>
  <div id="app">
    <v-grid
      v-if="grid === 1"
      key="1"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </div>
</template>

3.定义自己的列和行数据。

export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "Name",
        },
        {
          prop: "details",
          name: "Email",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};

变更日志:

v3.0.9(04/21/2021)

  • 排序事件已更新

v3.0.8(04/11/2021)

  • 筛选器修复

v3.0.61(04/11/2021)

  • 默认拉伸
  • 编辑修正
  • 移动滚动改进

v3.0.53(04/08/2021)

  • 次要插件更新可拉伸

v3.0.51(04/06/2021)

  • 滚动支持拉伸

v3.0.3(03/29/2021)

  • 焦点问题已解决

v3.0.2(03/26/2021)

  • 删除了视口组件,这个额外的层是多余的
  • 将类更改为复杂名称,以支持引导程序和其他库
  • 为了支持现代的事件命名方法,所有方法都迁移为小写。这意味着事件名称迁移:所有事件的afterEdit-> afteredit。
  • 添加了纯esm模块支持,以便在所有现代前端工具(例如vitejs,宗地等)中使用网格,现在您可以导入自定义元素而无需延迟加载,只需记住您要负责polifills

03/15/2021

  • v3.0.0beta1

03/14/2021

  • v3.0

02/16/2021

  • v2.9.9

02/15/2021

  • Vue构造函数作为结构

2021年2月11日

  • 问题修复

2021年2月6日

  • 修复了Vue包装器问题