@activewidgets/vue 中文文档教程

Question

ActiveWidgets/Vue • Datagrid

ActiveWidgets 是一个多框架 UI 组件库。 这个包提供了Vue 的虚拟化数据网格组件。

现场演示 / 开发者指南 / API 参考

• Installation
• Usage
• CDN links
• Data properties
• User events

Installation

添加 @activewidgets/vue添加到您的项目依赖项 -

> npm i --save @activewidgets/vue

Usage

现在您可以导入 ActiveWidgets 组件类 -

import { components } from "@activewidgets/vue";

并将它们注册到 Vue。

import {components} from '@activewidgets/vue';

// ...

export default { components, data };

它使 ax-datagrid 和其他 ax-... 标签在您的组件模板中可用 -

<template>
    <ax-datagrid :rows="rows"></ax-datagrid>
</template>

实例 | github 上的源 | 在 Codesandbox 上编辑

CDN links

为了快速制作原型，该包也可通过 ActiveWidgets CDN 获得-

<script src="https://cdn.activewidgets.com/vue"></script>

在这种情况下，您将在 ActiveWidgets.Vue 全局命名空间中找到组件。

var components = ActiveWidgets.Vue.components;

// or

var Datagrid = ActiveWidgets.Vue.Datagrid;

Data properties

您必须提供 列 和 rows 属性到数据网格以显示一些数据。 每个 column 对象的属性定义了数据的呈现方式 -

• field - where the cell data comes from (string|function)
• header - column header (string|object)
• width - column width (number, in pixels)
• align - cell text alignment (left|right|center)
• format - number/date format (string|function)
• fixed - fixed (true/false) for columns on the left or right side

style（字符串|对象）或 className 属性允许更改样式列和单元格元素。

function data(){

    const columns = [
      {header: 'Code', field: 'customerID', style: 'background:#def', fixed: true},
      {header: 'Company Name', field: 'companyName', width: 160},
      {header: 'Contact', field: 'contactName', width: 120},
      {header: 'Title', field: 'contactTitle', width: 120},
      {header: 'Address', field: 'address', width: 120, align: right}
    ];

    const rows = northwind.customers;

    return { columns, rows };
}

<template>
    <ax-datagrid :columns="columns" :rows="rows"></ax-datagrid>
</template>

实例 | github 上的源 | 在 Codesandbox 上编辑

User events

除了数据网格发出的标准 DOM 键盘和鼠标事件合成的 mouse 事件，可以更轻松地找到受用户操作影响的元素 -

function onMouse({row}){
    alert(`row ${row.key} clicked!`);
}

const methods = { onMouse };
export default { components, data, methods };

<template>
    <ax-datagrid @mouse="onMouse" :columns="columns" :rows="rows"></ax-datagrid>
</template>

实例 | github 上的源 | 在 Codesandbox 上编辑

More info

• Live demo
• Developer guide
• API reference
• Licensing
• Support forum

---