适用于Bootstrap的Laravel的Vue.js数据表组件

最新推荐文章于 2024-06-13 09:32:45 发布

cuk5239

最新推荐文章于 2024-06-13 09:32:45 发布

阅读量202

点赞数

文章标签：过滤器 vue bootstrap filter react ViewUI

原文链接：https://vuejsexamples.com/a-vue-js-datatable-component-for-laravel-that-works-with-bootstrap/

版权

Laravel Vue数据表 (Laravel Vue Datatable)

A Vue.js datatable component for Laravel that works with Bootstrap.

用于Laravel的Vue.js数据表组件，可与Bootstrap一起使用。

要求 (Requirements)

Vue.js 2.x
Vue.js 2.x
Laravel 5.x
Laravel 5.x
Bootstrap 4 (Optional)
Bootstrap 4(可选)

This package makes use of an optional default component, the Laravel Vue Pagination component created by gilbitron. If you need a pagination component for other areas of your website and you are using a Laravel API & Bootstrap, i highly suggest using this flexible component.

该软件包使用了可选的默认组件，即由gilbitron创建的Laravel Vue分页组件。如果您需要在网站其他区域使用分页组件，并且正在使用Laravel API和Bootstrap，我强烈建议您使用此灵活组件。

View demo 查看演示 View Github 查看Github

套件安装 (Package Installation)

See details https://github.com/jamesdordoy/Laravel-Vue-Datatables

查看详细信息https://github.com/jamesdordoy/Laravel-Vue-Datatables

组件安装 (Component Installation)

$ npm install laravel-vue-datatable

注册插件 (Register the Plugin)

import DataTable from 'laravel-vue-datatable';
Vue.use(DataTable);

基本范例 (Basic Example)

UserDatatable.vue

UserDatatable.vue

<data-table
    url="http://vue-datatable.test/ajax"
    :per-page="perPage"
    :columns="columns">
</data-table>

export default {
    name: 'app',
    data() {
        return {
            perPage: ['10', '25', '50'],
            columns: [
                {
                    label: 'ID',
                    name: 'id',
                    filterable: true,
                },
                {
                    label: 'Name',
                    name: 'name',
                    filterable: true,
                },
                {
                    label: 'Email',
                    name: 'email',
                    filterable: true,
                },
                {
                    label: '',
                    name: 'View',
                    filterable: false,
                },
            ]
        }
    },
}

API (API)

数据表道具 (Datatable Props)

Name	Type	Default	Description
`url`	String	"/"	The JSON url
`columns`	Array	[]	The table columns
`per-page`	Array	[ '10', '25', '50' ]	(optional) Amount to be displayed
`classes`	Object	See Below	(optional) Table classes
`pagination`	Object	{}	(optional) props for gilbitron/laravel-vue-pagination

名称	类型	默认	描述
`url`	串	“ /”	JSON网址
`columns`	数组	[]	表格列
`per-page`	数组	['10'，'25'，'50']	(可选)要显示的金额
`classes`	目的	见下文	(可选)表类
`pagination`	目的	{}	(可选) 吉尔比特龙/ laravel-vue-pagination的道具

默认类 (Default Classes)

{
    "table-container": {
        "table-responsive": true,
    },
    "table": {
        "table": true,
        "table-striped": true,
        "table-dark": true,
    },
    "t-head": {

    },
    "t-body": {
        
    },
    "t-head-tr": {

    },
    "t-body-tr": {
        
    },
    "td": {

    },
    "th": {
        
    },
}

列道具 (Column Props)

Name	Type	Default	Description
`label`	String	""	The JSON url
`name`	String	""	The table column header name
`width`	Number	0	The table column width
`filterable`	Boolean	false	Is the column filterable
`component`	Component	null	A dynamic component that can be injected
`classes`	Object	{}	Component classes to parse

名称	类型	默认	描述
`label`	串	”	JSON网址
`name`	串	”	表列标题名称
`width`	数	0	表格栏宽
`filterable`	布尔型	假	列是否可过滤
`component`	零件	空值	可以注入的动态成分
`classes`	目的	{}	要解析的组件类

使用动态组件 (Using Dynamic Components)

You can also inject your own components into the table such as buttons. Your buttons, links etc can also listen for events.

您也可以将自己的组件(例如按钮)注入表中。您的按钮，链接等也可以监听事件。

示例按钮组件 (Example Button Component)

(ExampleButton.vue)

(ExampleButton.vue)

<template>
    <button :class="classes" @click="click(data)" title="Update">
        <span>
            <i class="fa fa-eye" aria-hidden="true"></i>
        </span>
        &nbsp;
        {{ name }}
    </button>
</template>

export default {
    props: {
        data: {},
        name: {},
        click: {},
        classes: {},
    }
}

动态数据表列 (Dynamic Datatable Columns)

(UserDatatable.vue)

(UserDatatable.vue)

import ExampleButton './ExampleButton.vue';

export default {
    data() {
        return {
            url: 'http://vue-datatable.test/ajax',
            perPage: ['10', '25', '50'],
            columns: [
            {
                label: 'ID',
                name: 'id',
                filterable: true,
            },
            {
                label: 'Name',
                 name: 'name',
                filterable: true,
            },
            {
                label: 'Email',
                name: 'email',
                filterable: true,
            }
            {
                label: '',
                name: 'View',
                filterable: false,
                component: ExampleButton,
                event: "click",
                handler: this.alertMe,
                classes: { 
                    'btn': true,
                    'btn-primary': true,
                    'btn-sm': true,
                } 
            },
            ]
        }
    },
    components: {
        // eslint-disable-next-line
        ExampleButton,
    },
    methods: {
        alertMe(data) {
            alert("hey");
        }
    },
}

覆盖过滤器和分页组件 (Overriding the Filters and Pagination Components)

If the included pagination or filters do not meet your requirements or if the styling is incorrect, they can be over-written using scoped slots.

如果随附的分页或过滤器不符合您的要求，或者样式不正确，则可以使用作用域插槽将其覆盖。

分页数据表 (Paginatior Datatable)

<data-table
    :url="url"
    :columns="columns"
    :per-page="perPage">

    <span slot="pagination" slot-scope="{ links, meta }">
        <paginator 
            :meta="meta"
            :links="links"
            @next="updateUrl"
            @prev="updateUrl">
        </paginator>
    </span>
</data-table>

Once the URL has been updated by your customer paginator or filters, the table will re-render. Alterativly, if updating the URL is troublesome, different table filters can be manipulated by your filters using the v-model directive:

您的客户分页器或过滤器更新了URL后，该表将重新呈现。或者，如果更新URL很麻烦，则可以使用v-model指令通过过滤器来操纵不同的表过滤器：

示例过滤器 (Example Filter)

(DatatableFilter.vue)

(DatatableFilter.vue)

This example filter will control the length of the table manipulating the tableData.length property using v-model.

此示例过滤器将使用v-model通过操纵tableData.length属性来控制表的长度。

<template>
    <select
        class="form-control"
        v-model="tableData.length">
        <option
            :key="index"
            :value="records"
            v-for="(records, index) in perPage">
            {{ records }}
        </option>
    </select>
</template>

export default {
    props: [
        "tableData", "perPage"
    ]
}

筛选数据表 (Filter Datatable)

<data-table
    :url="url"
    :columns="columns"
    :per-page="perPage">

    <span slot="filters" slot-scope="{ tableData, perPage }">
        <data-table-filters
            :per-page="perPage"
            :table-data="tableData">
        </data-table-filters>
    </span>
</data-table>

自定义过滤器 (Custom Filters)

You can also add your own custom filters to be sent to the Laravel backend:

您还可以添加自己的自定义过滤器，以发送到Laravel后端：

数据表 (Datatable)

data() {
    return {
        url: "/url",
        perPage: ['10', '25', '50'],
        columns: [
        	...
        ],
        filters: {
            isAdmin: '',
        },
        pagination:{
            limit: 1,
            align: "right",
            size: "small"
        }
    }
},

<data-table
    :url="url"
    :filters="filters"
    :columns="columns"
    :per-page="perPage"
    :pagination="pagination">
    <span slot="filters" slot-scope="{ tableData, perPage }">
        <data-table-filters
            :table-data="tableData"
            :per-page="perPage">
        </data-table-filters>
    </span>
</data-table>

示例过滤器 (Example Filter)

<div class="row mb-3">
    <div class="col-md-3">
        <select
            v-model="tableData.length"
            class="form-control">
            <option
                :key="index"
                :value="records"
                v-for="(records, index) in perPage">
                {{records}}
            </option>
        </select>
    </div>
    <div class="col-md-3">
        <select
            v-model="tableData.filters.isAdmin"
            class="form-control">
            <option value>All Staff</option>
            <option value='admin'>Admin</option>
            <option value='staff'>Staff</option>
        </select>
    </div>
    <div class="col-md-3 offset-md-3">
        <input
            name="name"
            class="form-control"
            v-model="tableData.search"
            placeholder="Search Table">
    </div>
</div>

This added "isAdmin" filter for staff type will be send to the Laravel backend and can be used to manipulate the results:

为人员类型添加的“ isAdmin”过滤器将发送到Laravel后端，并可用于处理结果：

$query = User::dataTableQuery($column, $dir, $length, $searchValue);
        
if (isset($isAdmin) && ! empty($isAdmin)) {
    $query->where("type", $isAdmin);
}
    
$data = $query->paginate($length);

return new DataTableCollectionResource($data);

设置数据表样式 (Styling the Datatable)

You can edit the style of the Datatable by overriding the classes prop. A example mixin config can be found be below for Tailwind:

您可以通过覆盖classes prop来编辑数据表的样式。以下是Tailwind的示例mixin配置：

尾风配置 (Tailwind Config)

(mixins/tailwind.js)

(mixins / tailwind.js)

Custom Class

自定义类

.stripped-table:nth-child(even) {
    @apply bg-black;
  }

export default {
    data() {
        return {
            classes: { 
                'table-container': {
                    'justify-center': true,
                    'w-full': true,
                    'flex': true,
                    'rounded': true,
                    'mb-6': true,
                    'shadow-md': true,
                },
                table: {
                    'text-left': true,
                    'w-full': true,
                    'border-collapse': true,
                },
                't-head': {
                    'text-grey-dark': true,
                    'bg-black': true,
                    'border-grey-light': true,
                    'py-4': true,
                    'px-6': true,
                },
                "t-body": {
                    'bg-grey-darkest': true,
                    
                },
                "t-head-tr": {
                    
                },
                "t-body-tr": {
                    'stripped-table': true,
                    'bg-grey-darkest': true,
                },
                "td": {
                    'py-4': true,
                    'px-6': true,
                    'border-b': true,
                    'border-grey-light': true,
                    'text-grey-light': true,
                },
                "th": {
                    'py-4': true,
                    'px-6': true,
                    'font-bold': true,
                    'uppercase': true,
                    'text-sm': true,
                    'text-grey-dark': true,
                    'border-b': true,
                    'border-grey-light': true,
                },
            }
        };
    },
}

尾风数据表 (Tailwind Datatable)

<data-table
    :url="url"
    :columns="columns"
    :classes="classes"
    :per-page="perPage">
    <span slot="filters" slot-scope="{ tableData, perPage }">
        <data-table-filters
            :table-data="tableData"
            :per-page="perPage">
        </data-table-filters>
    </span>

    <span slot="pagination" slot-scope="{ links, meta }">
        <paginator 
            @next="updateUrl"
            @prev="updateUrl"
            :meta="meta"
            :links="links">
        </paginator>
    </span>
</data-table>

import TailwindDatatable from '../mixins/tailwind.js';

export default {
    data() {
        return {
            url: 'http://vue-datatable.test/ajax',
            perPage: ['10', '25', '50'],
            columns: [
            {
                label: 'ID',
                name: 'id',
                filterable: true,
            },
            {
                label: 'Name',
                 name: 'name',
                filterable: true,
            },
            {
                label: 'Email',
                name: 'email',
                filterable: true,
            }
            ]
        }
    },
	mixins: [
		TailwindDatatable
	]
}