vue 父组件 子组件数据_Vue Stacks生态系统的数据表组件

vue 父组件 子组件数据

VueStacks.com数据表 (VueStacks.com Data-Table)

The VSTX Data Table is a powerful data grid component (Vue.js 2.4+) for displaying, sorting, searching, filtering, and interacting with large and deeply nested data sets. As simple as passing a Prop containing an array of objects, as complex you need it to be.

VSTX数据表是一个功能强大的数据网格组件(Vue.js 2.4+)，用于显示，排序，搜索，过滤以及与深层嵌套的大型数据集进行交互。 就像传递包含对象数组的Prop一样简单，而您需要它是如此复杂。

Theme (Look & Feel): We rely on the Bulma CSS framework and FontAwesome icons for themeing. These are needed for the component to display properly. Support for other CSS frameworks like Bootstrap can be achieved using additional CSS. Other icon sets can currently be used by overriding the icons with named slots.

主题(外观)：我们依靠Bulma CSS框架和FontAwesome图标作为主题。 这些是组件正常显示所必需的。 可以使用其他CSS来实现对其他CSS框架(如Bootstrap)的支持。 当前可以通过使用带有命名槽的图标覆盖其他图标集。

当前功能 (Current Features)

• Deep (nested) Sorting, Filtering, and Searching by All/Column

  按全部/列进行深度(嵌套)排序，过滤和搜索

• Multi-Column Sorts with Sort By configuration

  多列排序和“排序依据”配置

• Works with large datasets (Tested with 25k rows of complex nested objects)

  适用于大型数据集(已对25,000行复杂的嵌套对象进行了测试)

• Customize Row/Column/Cell content using Vue.js Named & Scoped Slots

  使用Vue.js命名和作用域插槽自定义行/列/单元格内容

• Customize Title, Description, Icons, Loading Animation, Errors, and more using Slots

  使用广告位自定义标题，说明，图标，加载动画，错误等

• Selectable rows with @onSelect event

  带有@onSelect事件的可选行

• Built-in Loading animation controlled through Prop

  通过Prop控制的内置加载动画

• Client-side exports of data to CSV and Excel

  客户端将数据导出到CSV和Excel

• Optional Column Totals by Page & All

  可选列总计(按页面和全部)

• Automatic Pagination with configurable page size

  自动分页，页面大小可配置

• On-page configurations for Column Position, Sort Order, and much more

  页面上的列位置，排序顺序等配置

• Configuration Prop input and Emits configuration change events to support configuration persistence

  配置属性输入和发出配置更改事件以支持配置持久性

• Built-in Filters for Outputting Money, Numbers, and Dates (including timezone support)

  内置的用于输出钱，数字和日期的过滤器(包括时区支持)

• Support for Custom Filters with n parameters

  支持具有n个参数的自定义过滤器

• Text Replacement for variable Links

  变量链接的文本替换

• Hidden Columns

  隐藏列

• Web Worker support for Filtering, Sorting, and Slicing data

  Web Worker支持过滤，排序和切片数据

路线图 (Roadmap)

• Add Weighted Multi-Column Sorting

  添加加权多列排序

• Abstract the CSS layer for supporting any CSS Framework/Icon Set

  抽象CSS层以支持任何CSS框架/图标集

• Improve mobile support (Fixed headers and first column)

  改善移动支持( 固定标题和第一列)

• Add Calculated Fields using basic Sum/Averages Formulas (can currently be achieved using Slots)

  使用基本的总和/平均公式添加计算字段(目前可以使用广告位来实现)

• Extend support for higher level math/formula functions

  扩展了对高级数学/公式函数的支持

• Incorporate Native Web Components in our 2.0 release

  在我们的2.0版本中合并本机Web组件

• Build testing suite for both UX/UI & low level support for testing formulas/math functions

  构建针对UX / UI的测试套件以及对测试公式/数学函数的低级支持

• Move thread-expensive Filtering, Sorting, and Slicing to Web Workers to reduce UI blocking

  将线程昂贵的筛选，排序和切片移至Web Workers以减少UI阻塞

• Support Complex Objects in Sort, Filter, and Search

  支持复杂对象的排序，过滤和搜索

• Multi-column Sorting

  多列排序

• Selectable Rows

  可选行

• Manage dependencies as externals

  作为外部管理依赖项

• Treeshake lodash in build

  构建中的Treeshake Lodash

安装 (Installation)

npm install vstx-data-table

用法 (Usage)

We use pug & stylus in all of our code and examples. Please make adjustments if you wish you get the example below to work without installing support for pug or stylus. The below example will render a simple data-table with 3 columns. More complex examples are available at www.vuestacks.com/data-table

我们在所有代码和示例中都使用了pug＆stylus。 如果您希望以下示例在不安装对哈巴狗或手写笔的支持的情况下工作，请进行调整。 下面的示例将呈现一个包含3列的简单数据表。 有关更复杂的示例，请访问www.vuestacks.com/data-table。

<template lang="pug">
  .sample-data-table
    data-table(
      :payload="data"
    )
</template>
<script>
import DataTable from 'vstx-data-table'

export default {
  name: 'SampleReport',
  components: {
    'data-table': DataTable
  },
  data () {
    return {
      data: [
        {id: 1, title: 'row1', amount: 1},
        {id: 2, title: 'row2', amount: 2},
        {id: 3, title: 'row3', amount: 3},
        {id: 4, title: 'row4', amount: 4}
      ]
    }
  }
}
</script>
<style lang="stylus">
</style>

翻译自: https://vuejsexamples.com/a-data-table-component-for-the-vue-stacks-ecosystem/

vue 父组件 子组件数据