materialize_花式的Materialize CSS数据表VueJS组件

materialize

Vue实现数据表 (vue-materialize-datatable)

A fancy Materialize CSS datatable VueJS component.

一个花哨的Materialize CSS数据表VueJS组件。

Library is kind of unstable. Bugs, missing features might be present

图书馆有点不稳定。 错误，可能缺少功能

特征 (Features)

• Sorting, with numerical sorting

  排序，采用数字排序

• Pagination

  分页

• Fuzzy searching

  模糊搜索

• Excel export

  Excel导出

• Printing

  列印

• Custom topbar buttons

  自定义顶部栏按钮

• Flexible data-from-row extractor

  灵活的行数据提取器

• Follows the Material Design spec

  遵循材料设计规范

• Really, really efficient.. handles thousands of rows flawlessly

  真的，非常有效..可以完美地处理数千行

• And much more..

  以及更多..

要求 (Requirements)

• materialize-css (and NOT any other MD library!)

  materialize-css (而不是任何其他MD库！)

• VueJS 2

  VueJS 2

安装 (Installation)

npm i vue-materialize-datatable --save

You also need to include Material Design icons. You have two ways of doing this:

您还需要包括“材料设计”图标。 您有两种方法可以做到这一点：

The first and the recommended way is loading via Google's CDN, by adding this tag to your HTML

第一种也是推荐的方法是通过将该标记添加到HTML中，通过Google的CDN进行加载

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Or this in your CSS/Sass files:

或者在您CSS / Sass文件中：

@import url(http://fonts.googleapis.com/icon?family=Material+Icons);

Alternatively, you can use the NPM package and add the font to your bundle by:

或者 ，您可以使用NPM软件包，并通过以下方式将字体添加到捆绑包中：

npm i material-design-icons-iconfont -S

and then include it in your Sass/CSS files

然后将其包含在您的Sass / CSS文件中

@import "~material-design-icons-iconfont/dist/material-design-icons";

用法 (Usage)

Include the component,

包括组件，

import DataTable from 'vue-materialize-datatable';

Then, register the component, however you like:

然后，注册组件，但是您喜欢：

{
    ...
    components: {
        ...
        "datatable": DataTable
    }
}

And then.. use the component:

然后..使用组件：

<datatable></datatable>

Of course, code above will render garbage. Here are the props it accepts to render some sensible data:

当然，上面的代码会渲染垃圾。 以下是一些渲染数据所接受的道具：

Prop name      =>    Description                    =>   Example

title          =>    The title of the datatable     =>   "Todos"                 // Name in top
columns        =>    Columns.                       =>   [                       // Array of objects
                                                            {
                                                                label: 'Name',  // Column name
                                                                field: 'name',  // Field name from row
                                                                                // Use dot for nested props
                                                                                // Can be function with row as 1st param
                                                                numeric: false, // Affects sorting
                                                                html: false,    // Escapes output if false.
                                                            }
                                                        ]
rows           =>    Rows.                          =>   [                       // Array of objects
                                                            {
                                                                name: "test",   // Whatever.
                                                                ...
                                                            }
                                                        ]
perPage        =>    Numbers of rows per page       =>   [10, 20, 30, 40, 50] (default) // Results per page
defaultPerPage =>    Default rows per page          =>   10 (default)            // Default results per page, otherwise it will be the first value of perPage
onClick        =>    Func. to execute on click      =>   console.log             // Function, row 1st param
clickable      =>    Rows are clickable.            =>   true (default)          // Row is passed in the event payload
                    Will fire `row-click` event                                  // See react to click on row (below)
sortable       =>    Cause column-click to sort     =>   true (default)          // Whether sortable
searchable     =>    Add fuzzy search functionality =>   true (default)          // Whether searchable
exactSearch    =>    Disable fuzzy search           =>   true (default)          // Whether only exact matches are returned
paginate       =>    Add footer next/prev. btns     =>   true (default)          // Whether paginated
exportable     =>    Add button to export to Excel  =>   true (default)          // Whether exportable
printable      =>    Add printing functionality     =>   true (default)          // Whether printable
customButtons  =>    Custom buttons thingy          =>   [                       // Array of objects
                                                            {
                                                                hide: false,    // Whether to hide the button
                                                                icon: 'search', // Materialize icon
                                                                onclick: aFunc, // Click handler
                                                            }
                                                        ]

React点击行 (React to click on row)

The datatable will emit the row-click event if clickable is set to true (default).

如果clickable设置为true (默认值)，则数据表将发出row-click事件。

The events payload will contain the row object, you can bind to the event like this:

事件有效负载将包含row object ，您可以像这样绑定到事件：

<datatable v-on:row-click="onRowClick"></datatable>

<script>
var app = new Vue({
  el: '#app',
  ...
  methods: {
    onRowClick: function (row) {
      //row contains the clicked object from `rows`
      console.log(row)
    }
  },
})
</script>
...

每页行数 (Rows per page)

You can specify the options of rows per page with the perPage prop. The first value will be the default value and the array will be sorted, so you can put whatever number you want.

您可以使用perPage指定每页行的选项。 第一个值将是默认值，并且将对数组进行排序，因此您可以输入所需的任何数字。

<!-- The default value will be 100 -->
<datatable :perPage="[100, 10, 25, 50, 500]"></datatable>

The options will be rendered as [10, 20, 50, 100, 500]

选项将呈现为[10, 20, 50, 100, 500]

Otherwise, you can specify the default rows per page with the defaultPerPage prop.

否则，您可以使用defaultPerPage指定每页的默认行。

<!-- The default value will be 100 -->
<datatable :perPage="[10, 25, 50, 100, 500]" :defaultPerPage="100"></datatable>

翻译自: https://vuejsexamples.com/a-fancy-materialize-css-datatable-vuejs-component/

materialize