vue.js 移动端组件库_vue.js服务器端组件以创建动态表

vue.js 移动端组件库

Vue数据源 (Vue Datasource)

A Vue.js component to create dynamic tables. Compatible with Vue 2.x and Laravel.

一个Vue.js组件，用于创建动态表。 与Vue 2.x和Laravel兼容。

---

---

安装/使用 (Install/Usage)

$ npm install vue-datasource

<div id="#app">
    <server-datasource
        source="api_url"
        :columns="columns"
        :actions="actions"></server-datasource>
</div>

import { ServerDatasource } from 'vue-datasource'

new Vue({
    el: '#app',
    components: {
        ServerDatasource
    },
    data() {
        return {
            columns: [...],
            actions: [...]
        }
    }
});

数据API示例 (Data API Example)

{
    "pagination": {
        "total": 0,
        "to": 0,
        "from": 0,
        "per_page": 10,
        "current_page": 1
    },
    "data": [...items]
}

列 (Columns)

Each column object needs a name and key attributes.

每个列对象都需要一个name和key属性。

{
    ...,
    columns: [
        {
            name: 'Name', // Table column name to display
            key: 'name', // Key name from row object
        }
    ]
}

For Laravel users, you can access relationships through the key attribute. Lets say we have the following object in our users array.

对于Laravel用户，您可以通过key属性访问关系。 可以说，我们的用户数组中有以下对象。

[
    ...,
    {
        name: 'Foo',
        last_name: 'Bar'
        role_id: 1,
        role: {
            name: 'admin'
        }
    }
]

To get the user's role we would need to define in our columns array:

为了获得用户的角色，我们需要在我们的columns数组中定义：

{
    ...,
    columns: [
        {
            name: 'Role',
            key: 'role.name'
        }
    ]
}

渲染栏 (Render column)

This callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.

该回调将修改数据以进行各种操作。 例如对列值应用特定格式或算术运算，然后将其返回。

{
    ...,
    columns: [
        {
            name: 'Name',
            key: 'name',
            render(value) { // Render callback
                return `Enginner ${value}`;
            }
        }
    ]
}

翻译结构 (Translation Structure)

{
    limit: 'Limit',
    search: 'Search',
    placeholder_search: 'Type to search..',
    records_not_found: 'No records found',
    pagination: {
        show: 'Showing',
        to: 'to',
        of: 'of',
        entries: 'entries'
    }
}

动作事件结构 (Action Event Sctructure)

{
    ...,
    actions: [
        {
            text: 'Click me', // Button label
            icon: 'glyphicon glyphicon-check', // Button icon
            class: 'btn-primary', // Button class (background color)
            show(selectedRow) { // Event to define a condition to display the button with the selected row
                return true
            },
            event(e, row) { // Event handler callback. Gets event instace and selected row
                console.log('Click row: ', row); // If no row is selected, row will be NULL
            }
        }
    ]
}

发展历程 (Development)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

翻译自: https://vuejsexamples.com/a-vue-js-server-side-component-to-create-dynamic-tables/

vue.js 移动端组件库